* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    overflow-x: hidden;
    background: #fff;
    position: relative;
}

/* 主視覺區塊 (100vh) */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 背景容器 (100vw) */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 1;
}

/* 主要內容容器 (75vw) */
.index-main-container {
    position: relative;
    width: 75vw;
    height: 100%;
    margin: 0 auto;
    z-index: 10;
}

.index-main-container .container-fluid {
    padding: 0;
    max-width: 100%;
    position: relative;
    z-index: 20;
    height: 100%;
}

.index-main-container .row {
    position: relative;
    z-index: 20;
}

/* 背景層 */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.bg-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 疊加層 */
.overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.overlay-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 手機版主視覺圖片 (桌面版隱藏) */
.mobile-hero-image {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
}

.mobile-hero-image img {
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
}

/* 手機版右下角建築物 (桌面版隱藏) */
.mobile-house-decoration {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.mobile-house-decoration img {
    width: 279px;
    height: auto;
    object-fit: contain;
}

/* 左側內容區塊 */
.left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 100px;
    align-items: flex-start;
}

/* 主標題 */
.hero-title-wrapper {
    position: relative;
    z-index: 20;
    margin-bottom: 50px;
}

.hero-title {
    width: 100%;
    max-width: 775px;
    height: auto;
}

.hero-title img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0px 0px 30px rgba(147, 255, 255, 0.1));
}

/* 特色卡片容器 */
.feature-cards-wrapper {
    position: relative;
    z-index: 30;
}

.feature-card {
    position: relative;
    width: 100%;
    max-width: 196px;
    height: 256px;
    border: 2px solid #aff4ff;
    border-radius: 8px;
    opacity: 0.9;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
    z-index: 30;
    overflow: hidden;
}

/* 背景圖層 - 使用 ::before 偽元素 */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://cdn.chainee.io/camp/frame.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* 中間卡片：只旋轉背景 */
.feature-card.rotated::before {
    transform: rotate(180deg);
}

.feature-card .card-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.feature-card h3 {
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 3.5px;
    margin: 0 0 20px 0;
    text-align: center;
    line-height: 1.2;
    width: 100%;
}

.feature-card p {
    color: #fff;
    font-size: 21px;
    line-height: 1.6;
    letter-spacing: 0.84px;
    opacity: 0.95;
    text-align: left;
    margin: 0;
    width: auto;
    display: inline-block;
}

/* 講師照片 */
.teacher-wrapper {
    position: relative;
    padding-top: 100px;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
}

.teacher-image {
    position: relative;
    width: 100%;
    max-width: 390px;
    z-index: 2;
}

.teacher-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 裝飾元素 */
/* 主標題上方的小硬幣 */
.decoration-bitcoin-title {
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%) rotate(15deg);
    width: 80px;
    height: auto;
    opacity: 0.7;
    z-index: 10;
}

.decoration-bitcoin-title img {
    width: 100%;
    height: auto;
}

/* 安全卡片左邊的區塊鏈icon */
.decoration-blockchain {
    position: absolute;
    left: 0px;
    bottom: 0px;
    transform-origin: bottom left;
    width: 250px;
    height: auto;
    z-index: 5;
    filter: drop-shadow(0px 0px 60px rgba(126, 238, 255, 0.4));
}

.decoration-blockchain img {
    width: 100%;
    height: auto;
}

/* 安全卡片下方的小硬幣icon */
.decoration-btc-small {
    position: absolute;
    left: 50px;
    bottom: -80px;
    width: 120px;
    height: auto;
    z-index: 5;
}

.decoration-btc-small img {
    width: 100%;
    height: auto;
}

/* 講師後方的硬幣圖片 */
.decoration-bitcoins-back {
    position: absolute;
    right: -100px;
    top: 0%;
    width: 800px;
    height: auto;
    z-index: 1;
}

.decoration-bitcoins-back img {
    width: 100%;
    height: auto;
}

/* 講師右側的logo2 (貼螢幕右邊) */
.decoration-logo2 {
    position: absolute;
    right: 0;
    top: 30%;
    width: 183px;
    height: auto;
    z-index: 8;
}

.decoration-logo2 img {
    width: 100%;
    height: auto;
}

/* 左邊建築物 (building3 3) */
.decoration-house-left {
    position: absolute;
    right: 30%;           /* 717/1512 = 47.42% */
    bottom: 0;
    height: 20%;
    z-index: 3;
}

.decoration-house-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右邊建築物 (building4 3) */
.decoration-house-right {
    position: absolute;
    right: 0px;
    bottom: 0;
    height: 30%;
    z-index: 3;
}

.decoration-house-right img {
    height:100%;
    height: 100%;
    object-fit: cover;
}

/* 裝飾元素 - 比特幣圖示等 */
.bitcoin-element-1 {
    position: absolute;
    top: 5%;
    left: 40%;
    width: 50vw;
    max-width: 796px;
    height: auto;
    opacity: 0.9;
}

.bitcoin-element-1 img {
    width: 100%;
    height: auto;
}

.bitcoin-element-2 {
    position: absolute;
    top: 12%;
    left: -2%;
    width: 25vw;
    max-width: 371px;
    height: auto;
    opacity: 0.75;
}

.bitcoin-element-2 img {
    width: 100%;
    height: auto;
}

.bitcoin-element-3 {
    position: absolute;
    bottom: 20%;
    left: 13%;
    width: 10vw;
    max-width: 161px;
    height: auto;
    opacity: 0.51;
}

.bitcoin-element-3 img {
    width: 100%;
    height: auto;
}

.chainee-logo-3d {
    position: absolute;
    top: 32%;
    right: 5%;
    width: 12vw;
    max-width: 184px;
    height: auto;
    opacity: 0.6;
    transform: rotate(344.565deg);
    filter: drop-shadow(0px 0px 40px rgba(175, 250, 255, 0.2));
}

.chainee-logo-3d img {
    width: 100%;
    height: auto;
}

.building-3 {
    position: absolute;
    bottom: 1px;
    left: 45%;
    width: 24vw;
    max-width: 363px;
    height: auto;
    opacity: 0.4;
}

.building-3 img {
    width: 100%;
    height: auto;
}

.building-4 {
    position: absolute;
    bottom: 1px;
    right: -1%;
    width: 40vw;
    max-width: 616px;
    height: auto;
    opacity: 0.5;
}

.building-4 img {
    width: 100%;
    height: auto;
}

.decoration-image {
    position: absolute;
    filter: drop-shadow(0px 0px 60px rgba(126, 238, 255, 0.4));
}

/* 響應式調整 */
@media (max-width: 1400px) {
    .index-main-container {
        width: 85vw;
    }
}

/* 平板尺寸調整 (768px - 1290px) */
@media (max-width: 1290px) and (min-width: 768px) {
    /* 主容器寬度 */
    .index-main-container {
        width: 90vw;
    }

    /* container-fluid 垂直置中 */
    .index-main-container .container-fluid {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .index-main-container .row {
        width: 100%;
    }

    /* 左側內容區塊 */
    .left-content {
        padding-top: 80px;
    }

    /* 主標題區塊 */
    .hero-title-wrapper {
        margin-bottom: 35px;
    }

    .hero-title {
        max-width: 550px;
    }

    /* 特色卡片 */
    .feature-card {
        width: 100%;
        max-width: 196px;
        height: 180px;
        padding: 20px 10px;
    }

    .feature-card h3 {
        font-size: 22px;
        letter-spacing: 2.2px;
        margin: 0 0 12px 0;
    }

    .feature-card p {
        font-size: 14px;
        letter-spacing: 0.56px;
        line-height: 1.5;
    }

    /* 講師區塊 */
    .teacher-wrapper {
        padding-top: 80px;
    }

    .teacher-image {
        max-width: 300px;
    }

    /* 裝飾元素調整 */
    .decoration-bitcoin-title {
        width: 60px;
        top: -40px;
    }

    .decoration-blockchain {
        width: 180px;
    }

    .decoration-btc-small {
        width: 90px;
        left: 30px;
        bottom: -60px;
    }

    .decoration-bitcoins-back {
        right: -80px;
        width: 600px;
    }

    .decoration-logo2 {
        width: 140px;
    }

    .decoration-house-left {
        height: 18%;
    }

    .decoration-house-right {
        height: 25%;
    }

    /* 背景裝飾元素調整 */
    .bitcoin-element-2 {
        width: 22vw;
    }

    .bitcoin-element-3 {
        width: 8vw;
    }
}

/* 較小平板和大螢幕通用調整 */
@media (max-width: 1290px) {
    .index-main-container {
        width: 90vw;
    }

    .hero-title-wrapper {
        padding-top: 50px;
    }

    .teacher-wrapper {
        padding-top: 30px;
    }
}

/* 手機版佈局調整 */
@media (max-width: 767.98px) {
    .mobile-hero-image img{
        max-width: none;
        /* width: 140vw; */
    }
    /* 保留背景的疊加層 */
    .overlay-layer {
        display: block;
    }

    /* 隱藏桌面版的其他背景層 */
    .bg-layer {
        display: none;
    }

    /* 顯示手機版主視覺圖片 */
    .mobile-hero-image {
        display: block;
    }

    /* 顯示手機版右下角建築物 */
    .mobile-house-decoration {
        display: block;
    }

    /* 隱藏桌面版裝飾元素 */
    .bitcoin-element-2,
    .bitcoin-element-3,
    .decoration-blockchain,
    .decoration-logo2,
    .decoration-house-left,
    .decoration-house-right,
    .decoration-bitcoin-title,
    .decoration-btc-small,
    .decoration-bitcoins-back {
        display: none;
    }

    /* 隱藏桌面版主容器內容 */
    .index-main-container {
        display: none;
    }
}