/* =========================================================
   Metropolis — self-hosted (headings only; CJK falls back to
   Noto Sans TC automatically since Metropolis has no CJK glyphs)
   ========================================================= */
@font-face{font-family:"Metropolis";src:url("/fonts/metropolis/Metropolis-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Metropolis";src:url("/fonts/metropolis/Metropolis-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Metropolis";src:url("/fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Metropolis";src:url("/fonts/metropolis/Metropolis-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Metropolis";src:url("/fonts/metropolis/Metropolis-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* =========================================================
   Homepage-only dark theme tokens
   (scoped to this file — dayin-home.css is loaded on Index only)
   ========================================================= */
:root{
  --home-bg:#080809;
  --home-panel:#0e0e11;
}
body{background:var(--home-bg)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* .hero, .showcase-strip and .final-cta keep their photographic
   backgrounds (defined globally in styles.css) — only the sections
   with no useful source photo (or where the photo has marketing
   text baked in, e.g. .split's 04.webp) get a flat dark treatment. */
.partners,.categories,.split,.esg-teaser,.news-teaser{
  background:var(--home-bg);
}
.categories,.esg-teaser{ background:var(--home-panel); }

.hero h1,.hero h2,.hero h3,.hero h4,
.showcase-strip h3,
.sect-head h2,
.cat-card h3,
.split-text h2,
.esg-card h4,
.news-card h4,
.final-cta-inner h2{
  font-family:"Metropolis","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;
}

/* every homepage section is dark now — default h1-h4 color (var(--ink),
   near-black) is invisible here unless explicitly reset per section */
.sect-head h2{color:#fff}

/* ---------- Top Banner Carousel ---------- */
.banner-carousel{position:relative;background:var(--home-bg)}
.banner-track{position:relative;width:100%;aspect-ratio:16/6;min-height:100vh;overflow:hidden}
.banner-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transition:opacity .6s ease;text-decoration:none
}
.banner-slide.active{opacity:1;visibility:visible}
.banner-slide img{position:absolute;inset:0;width:100%;object-fit:contain}
.banner-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,transparent 45%);pointer-events:none}
.banner-slide-text{position:relative;z-index:1;padding:40px 56px;max-width:640px}
.banner-slide-text h2{color:#fff;font-size:clamp(24px,3vw,36px);font-weight:800;margin-bottom:10px}
.banner-slide-text p{color:#e5e5e5;font-size:15px;line-height:1.7}
.banner-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:8px}
.banner-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.35);padding:0;cursor:pointer;transition:all .25s}
.banner-dot.active{background:var(--accent);width:22px;border-radius:5px}
.banner-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.25);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s
}
.banner-nav:hover{background:var(--accent);border-color:var(--accent)}
.banner-nav.prev{left:20px}
.banner-nav.next{right:20px}
@media(max-width:767px){
  .banner-track{aspect-ratio:3/4;min-height:100vh}
  .banner-slide-text{padding:24px}
  .banner-nav{width:36px;height:36px}
  .banner-nav.prev{left:10px}
  .banner-nav.next{right:10px}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:calc(100vh - 82px);display:flex;align-items:center;overflow:hidden;color:#fff;background-position:center right}
.hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(ellipse 60% 55% at 78% 42%,rgba(228,106,88,.14),transparent 70%),
    linear-gradient(90deg,rgba(4,4,5,.88) 0%,rgba(4,4,5,.55) 42%,rgba(4,4,5,.15) 68%,rgba(4,4,5,.35) 100%);
  pointer-events:none}
    .hero::after {
        content: "DAYIN";
        position: absolute;
        right: -60px;
        bottom: -50px;
        font-family: "Bebas Neue",sans-serif;
        font-family: "Metropolis","Noto Sans TC";
        font-size: clamp(180px,28vw,420px);
        color: rgba(255,255,255,.035);
        letter-spacing: -.02em;
        line-height: .8;
        pointer-events: none
    }
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;width:100%;}
.hero-tag {
    font-family: "Oswald",sans-serif;
    font-family: "Metropolis","Noto Sans TC";
    font-size: 13px;
    letter-spacing: .4em;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    text-transform: uppercase;
    font-weight: 600
}
.hero-tag::before{content:"";width:40px;height:2px;background:var(--accent)}
.hero h1{color:#fff;font-size:clamp(44px,6vw,40px);font-weight:800;line-height:1.05;margin-bottom:15px}
.hero h1 .accent{color:var(--accent);display:block}
.hero-lead{color:#fff;font-size:36px;line-height:1.5;max-width:560px;margin-bottom:40px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;color:#777;font-size:11px;letter-spacing:.35em;text-transform:uppercase;font-family:"Oswald",sans-serif;font-weight:500}
.hero-scroll::after{content:"";display:block;width:1px;height:34px;background:linear-gradient(to bottom,var(--accent),transparent);margin:10px auto 0}

/* ---------- Stats band ---------- */
.stats-band{padding:56px 0;background:var(--home-bg);border-bottom:1px solid rgba(255,255,255,.08)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);}
.stats-row+.stats-row{margin-top:38px}
.stat-item{padding:0 ;border-left:1px solid rgba(255,255,255,.14);text-align: center;}
.stat-item:first-child{border-left:none;}
    .stat-item .num {
        font-family: "Bebas Neue",sans-serif;
        font-family: "Metropolis","Noto Sans TC";
        font-size: clamp(34px,3.4vw,30px);
        color: var(--accent);
        line-height: 1;
        letter-spacing: .02em;
        white-space: nowrap
    }
.stat-item .num .plus{font-size:.55em}
    .stat-item .num .unit {
        font-family: "Oswald",sans-serif;
        font-family: "Metropolis","Noto Sans TC";
        font-size: 12px;
        color: var(--accent);
        font-weight: 600;
        margin-left: 6px;
        letter-spacing: .02em
    }
.stat-item .lbl{font-size:16px;color:#eee;font-weight:700;margin-top:10px}

/* ---------- Showcase strip ---------- */ 
.showcase-strip{position:relative;height:240px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.showcase-strip::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,9,.92) 0%,rgba(8,8,9,.5) 45%,rgba(8,8,9,.92) 100%)}
.showcase-strip .ss-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:space-between;color:#fff;gap:32px;flex-wrap:wrap}
.showcase-strip h3{color:#fff;font-size:28px;margin:0}
.showcase-strip p{color:#aaa;font-size:14px;max-width:480px;line-height:1.8;margin:8px 0 0}

/* ---------- Partners ---------- */
.partners{padding:60px 0 40px;background:var(--home-bg);border-bottom:1px solid rgba(255,255,255,.08)}
.partners-label {
    text-align: center;
    font-family: "Oswald",sans-serif;
    font-family: "Metropolis","Noto Sans TC";
    font-size: 12px;
    letter-spacing: .35em;
    color: #7a7a80;
    margin-bottom: 32px;
    text-transform: uppercase;
    font-weight: 600
}
.partner-logo{height:60px;display:flex;align-items:center;justify-content:center;background:#f1efec;border:1px solid transparent;border-radius:100px;font-family:"Bebas Neue",sans-serif;font-size:22px;letter-spacing:.08em;color:#2a2a2a;transition:all .3s;padding:0 18px;text-align:center}
.partner-logo:hover{color:#fff;background:var(--accent);transform:translateY(-2px)}

/* ---------- Categories → stacked alternating Product Series panels ---------- */
.categories {
    padding: 60px 0 0 0;
    background: linear-gradient(115deg, #14161b 0%, #1b1e24 100%) !important;
}
.categories .sect-head{padding:0 32px;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.categories .sect-head .right{color:#9a9aa2}
.categories .sect-head .right a{color:var(--accent)}

.series-list{margin-top:0px}
/* Bootstrap row/col-6 layout: text on one side, category image on the other.
   .flex-row-reverse (added per-panel in the view, on odd items) flips which
   side the image sits on so panels alternate left/right down the page. */
    .series-list .series-panel {
        padding: 60px 0;
        position: relative;
        background: linear-gradient(115deg, #14161b 0%, #1b1e24 100%) !important;
        border-bottom: 1px solid rgba(255,255,255,.06)
    }
.series-content{padding:0px 0}
.series-inner{padding:0 64px;width:100%}
.series-num{font-size:64px;color:var(--accent);line-height:1;margin-bottom:8px}
.series-content h3{margin:0 0 6px; font-size: 30px;}
.series-content h3 a{color:#fff}
    .series-content h3 span {
        color: #C8533F
    }
.series-en {
    font-family: "Oswald",sans-serif;
    font-family: "Metropolis","Noto Sans TC";
    font-size: 12px;
    color: #7a7a80;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 18px
}
.series-content p{color:#9a9aa2;font-size:14.5px;line-height:1.9;margin-bottom:24px}
.series-media{align-self:stretch;}
    .series-media .pic-item {
        position: relative;
        width: 100%;
        padding-bottom: 100%;
        overflow: hidden;
        /*height: 100%;
        min-height: 400px;
        overflow: hidden*/
    }
        .series-media .pic-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.series-media-placeholder{
  height:100%;min-height:400px;background:#1a1a1c;display:flex;align-items:center;justify-content:center;
  color:#7a7a80;font-size:13px;font-weight:700;text-align:center;padding:20px
}
@media(max-width:767px){
    .series-content {
        padding: 0px 0;
    }

  /*.series-media{min-height:260px}*/
  .series-media .pic-item,.series-media .pic-item img,.series-media-placeholder{min-height:260px}
}
.series-pills{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top: 20px;margin-bottom:30px;padding:0;}
    .series-pills li a {
        display: block;
        width: 100%;
        font-size: 16px;
        color: #111;
        padding: 15px 40px;
        border-radius: 100px;
        background: #e2e2e2;
        transition: all .25s;
        position:relative;
    }
.series-pills li a::after{
    content:"";background:var(--accent);
    height: 1px;
    width: 150px;                          
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translate(-20px, -50%);
}
@media(max-width:960px) {
    .series-pills li a::after {
        display: none;
    }
}
    .series-pills li a:hover {
        background: #fff;
        border-color: var(--accent)
    }

.series-link {
    font-family: "Oswald",sans-serif;
    font-family: "Metropolis","Noto Sans TC";
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--accent);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

    /* ---------- OEM / ODM split ---------- */
    .split {
        padding: 110px 0 0 0;
        margin-bottom: -20px;
        background: #13161d;
        position: relative;
        overflow: hidden;
        border-top: 1px solid rgba(255,255,255,.08)
    }
        /*.split::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 15% 30%,rgba(228,106,88,.12),transparent 70%);pointer-events:none}*/
        .split .container {
            position: relative;
            z-index: 1
        }

        .split .pic-item {
            border-radius: var(--radius);
            overflow: hidden;
        }
    /* neutralise legacy translucent plaque from styles.css (.split-text.reveal) */
    .split-text.reveal {
        background: transparent;
        /*padding: 0*/
    }

    .split-text h2 {
        color: #fff;
        margin-bottom: 20px
    }

    .split-text p {
        color: #9a9aa2;
        font-size: 15.5px;
        line-height: 1.9;
        margin-bottom: 30px
    }

    .dash {
        display: block;
        width: 35px;
        height: 3px;
        background: var(--accent);
        margin-bottom: 20px
    }

    .sect-head-center {
        text-align: center;
        max-width: 760px;
        margin: 0 auto
    }

        .sect-head-center .dash {
            margin: 22px auto;
        }

        .sect-head-center h2 {
            color: #fff;
            margin-bottom: 18px;
            font-size: 36px;
        }
        .sect-head-center p {
            color: #ddd;
            font-size: 18px;
            line-height: 1.9;
        }

    .sect-head .left .dash {
        margin-bottom: 18px
    }

    .split-row {
        margin-top: 0
    }

    .split-feature-list {
        margin-bottom: 38px;
        list-style: none;
    }

        .split-feature-list li {
            padding: 20px 0;
            border-bottom: 1px solid rgba(255,255,255,.08)
        }
        /*.split-feature-list li:first-child{border-top:none;padding-top:0}*/
        .split-feature-list .fnum {
            font-size: 32px;
            color: #fff;
            line-height: 1;
            margin-bottom: 6px
        }

       /* .split-feature-list .ftitle {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 10px
        }

            .split-feature-list .ftitle::before {
                content: "";
                width: 20px;
                height: 2px;
                background: var(--accent);
                flex: none
            }*/

        .split-feature-list h3 {
            color: #fff;
            font-size: 18px;
            letter-spacing: .03em;
            text-transform: uppercase;
            margin: 0
        }

        .split-feature-list p {
            color: #eee;
            font-size: 16px;
            line-height: 1.8;
            margin: 0;
            /*padding-left: 50px*/
        }

    /* ---------- ESG teaser ---------- */
    .esg-teaser {
        padding: 110px 0
    }
        /* neutralise legacy light-theme hack from styles.css (.esg-teaser .container) */
        .esg-teaser .container {
            background: transparent;
            margin-top: 0;
            padding-top: 0
        }

        .esg-teaser .sect-head .right {
            color: #9a9aa2
        }

            .esg-teaser .sect-head .right a {
                color: var(--accent)
            }

    .esg-card {
        background: #141417;
        border: 1px solid rgba(255,255,255,.08);
        border-left: 4px solid var(--accent);
        transition: all .3s
    }

        .esg-card:hover {
            background: #191920;
            box-shadow: 0 18px 40px rgba(0,0,0,.5);
            transform: translateY(-3px)
        }

        .esg-card .esg-icon {
            width: 56px;
            height: 56px;
            background: var(--accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "Bebas Neue",sans-serif;
            font-family: "Metropolis","Noto Sans TC";
            font-size: 30px;
            margin-bottom: 22px;
            border-radius: var(--radius)
        }

        .esg-card h4 {
            color: #fff;
            font-size: 20px;
            margin-bottom: 10px
        }

        .esg-card .esg-en {
            font-family: "Oswald",sans-serif;
            font-family: "Metropolis","Noto Sans TC";
            font-size: 11px;
            letter-spacing: .3em;
            color: var(--accent);
            text-transform: uppercase;
            margin-bottom: 14px;
            font-weight: 600
        }

        .esg-card p {
            color: #9a9aa2;
            font-size: 14px;
            line-height: 1.85;
            margin-bottom: 18px
        }

        .esg-card .esg-link {
            font-family: "Oswald",sans-serif;
            font-family: "Metropolis","Noto Sans TC";
            font-size: 12px;
            letter-spacing: .2em;
            color: var(--accent);
            font-weight: 700
        }

    /* ---------- News teaser ---------- */
    .news-teaser {
        margin-top: -20px;
        position: relative;
        z-index: 1;
        padding: 110px 0;
        background: var(--home-bg);
        border-top: 1px solid rgba(255,255,255,.08)
    }

        .news-teaser .sect-head .right {
            color: #9a9aa2
        }

            .news-teaser .sect-head .right a {
                color: var(--accent)
            }

    .news-track {
        position: relative;
        margin-top: 60px;
    }

    .news-page {
        display: none
    }

        .news-page.active {
            display: block
        }

    .news-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px
    }

    .news-card {
        position: relative;
        overflow: hidden;
        /*border: 1px solid rgba(255,255,255,.08);*/
        border-radius: 14px;
        transition: all .3s;
        display: flex;
        align-items: flex-start;
        /*min-height: 300px;*/
        background-color: #141417;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat
    }

        .news-card:hover {
            border-color: var(--accent);
            box-shadow: 0 18px 40px rgba(0,0,0,.5);
            transform: translateY(-3px)
        }

        .news-card .news-body {
            padding: 20px 20px;
            max-width: 78%;
            position: relative;
            z-index: 1;
        }

        .news-card h3 {
            font-size: 24px;
            color: #fff;
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 16px
        }

        .news-card p {
            font-size: 16px;
            color: #eee;
            line-height: 1.8
        }

    .news-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 44px
    }

    .news-dots {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 100px;
        padding: 10px 14px
    }

    .news-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,.25);
        padding: 0;
        cursor: pointer;
        transition: all .25s
    }

        .news-dot.active {
            background: var(--accent);
            width: 22px;
            border-radius: 5px
        }

    .news-play {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.15);
        background: transparent;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all .25s
    }

        .news-play:hover {
            border-color: var(--accent);
            color: var(--accent)
        }

    /* ---------- Final CTA ---------- */
    /* keeps its photo background (styles.css) — panel below is a frosted
   dark glass card floated on top so the photo still reads through */
    .final-cta {
        padding: 110px 0;
        border-top: 1px solid rgba(255,255,255,.08);
        background-position: center
    }

    .final-cta-inner {
        padding: 80px 60px;
        color: #fff;
        position: relative;
        overflow: hidden;
        text-align: center;
        background: rgba(8,8,9,.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: var(--radius)
    }

        .final-cta-inner::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 60% 80% at 50% 0%,rgba(228,106,88,.18),transparent 70%);
            pointer-events: none
        }

        .final-cta-inner > * {
            position: relative;
            z-index: 1
        }

        .final-cta-inner h2 {
            color: #fff;
            margin-bottom: 18px
        }

        .final-cta-inner p {
            color: #aaa;
            font-size: 16px;
            max-width: 700px;
            margin: 0 auto 36px;
            line-height: 1.85
        }

        .final-cta-inner .btns {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap
        }


    @media(max-width:992px) {
        /*.series-content{
            padding: 60px 0;
        }*/
        .series-inner {
            padding: 0px;
        }
        .series-list .series-panel {
            padding: 0px 0;
        }
        .sect-head h2 {
            font-size: 20px;
        }
        .news-card {
            min-height: auto;
        }
        .news-card .news-body {
            padding: 20px 15px;
            max-width: 100%;
        }
            .news-card h4 {
            font-size: 18px;
        }
            .hero {
            min-height: 100vh;
            padding: 40px 0;
            background-image: url(/dayin/images/index/p01.webp);
            background-position: center top
        }

        .hero-inner {
            grid-template-columns: 1fr;
            gap: 40px;
            padding: 40px 0
        }

        .hero::after {
            display: none
        }

        .hero-scroll {
            display: none
        }

        .hero h1 {
            font-size: 24px
        }

        .hero-lead {
            font-size: 16px;
            line-height: 1.7;
            margin-bottom: 28px
        }

        .showcase-strip {
            height: auto;
            padding: 40px 0
        }

            .showcase-strip .ss-inner {
                flex-direction: column;
                align-items: flex-start
            }

        .stats-row {
            grid-template-columns: repeat(2,1fr);
            row-gap: 28px
        }

            .stats-row + .stats-row {
                margin-top: 28px
            }

        .stat-item:nth-child(3) {
            border-left: none
        }

        .stat-item {
            padding: 0 12px
        }

            .stat-item .num {
                font-size: clamp(20px,6vw,20px)
            }

        

        .series-content h3 {
            font-size: 18px
        }
            .series-content h3 a{
                transition: all 0.2s ease-in-out;
            }
            .series-content h3 a:hover {
                color: #E46A58;
            }
        .series-pills li a {
            padding: 10px 40px;
            font-size: 15px;
        }
        .sect-head-center {
            margin-bottom: 40px
        }

            .sect-head-center h2 {
                font-size: 20px
            }

            .sect-head-center p {
                font-size: 16px
            }

        .split-row .col-md-5 {
            margin-bottom: 0
        }

        .split-feature-list h4 {
            font-size: 14px
        }

        .split-feature-list p {
            font-size: 15px
        }

        .news-grid {
            grid-template-columns: 1fr
        }

        .final-cta-inner {
            padding: 50px 24px
        }
    }
@media(max-width:767px) {
    .series-inner {
        padding: 60px 15px 10px;
    }
    .split-feature-list {
        padding-left: 0;
    }
    .news-teaser{
        padding: 60px 0;
        margin: 0;
    }
    .news-card h3 {
        font-size: 18px;
    }
    .news-card p{
        font-size: 15px;
    }
    .stat-item .lbl{
        font-size: 12px;
    }
    .stat-item .num {
        font-size: 18px;
    }
    }