/* =========================
   Global
========================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
    "Noto Sans TC",
    "Microsoft JhengHei",
    Arial,
    sans-serif;

    background: #f5f7fb;

    color: #1f2937;

    line-height: 1.8;

}



a {

    text-decoration: none;

    color: inherit;

}



p {

    color: #64748b;

}




/* =========================
   Navigation
========================= */


header {

    position: fixed;

    width:100%;

    top:0;

    z-index:1000;

    background:
    rgba(255,255,255,0.85);

    backdrop-filter: blur(12px);

    border-bottom:
    1px solid #e5e7eb;

}



nav {

    max-width:1200px;

    margin:auto;

    padding:18px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo {

    font-size:32px;

    font-weight:800;

    color:#0f3d7a;

}



nav ul {

    display:flex;

    list-style:none;

    gap:35px;

}



nav a {

    color:#475569;

    font-weight:500;

    transition:.3s;

}



nav a:hover {

    color:#2563eb;

}







/* =========================
   Hero
========================= */


.hero {

    min-height:100vh;

    padding:
    150px 10% 80px;


    display:flex;

    justify-content:space-between;

    align-items:center;


    background:

    linear-gradient(
    135deg,
    #0f3d7a,
    #2563eb
    );

}



.hero-content {

    max-width:600px;

}



.tag {

    color:#bfdbfe;

    letter-spacing:2px;

    font-size:14px;

}



.hero h1 {

    margin:25px 0;

    font-size:64px;

    line-height:1.25;

    color:white;

}



.hero p {

    color:#dbeafe;

    font-size:20px;

}




.button {

    display:inline-block;

    margin-top:35px;

    padding:14px 45px;

    background:white;

    color:#0f3d7a;

    border-radius:50px;

    font-weight:bold;

    transition:.3s;

}



.button:hover {

    transform:translateY(-5px);

}





.market-card {

    width:320px;

    padding:35px;

    border-radius:25px;

    background:

    rgba(255,255,255,.12);


    backdrop-filter:blur(10px);


    color:white;

}



.market-card span {

    font-size:13px;

    letter-spacing:2px;

}



.market-card h3 {

    font-size:32px;

    margin:20px 0;

}



.price {

    color:#bfdbfe;

}







/* =========================
   Section Common
========================= */


section {

    max-width:1200px;

    margin:100px auto;

    padding:0 30px;

}



.section-title p {

    color:#2563eb;

    font-size:14px;

    letter-spacing:2px;

    font-weight:bold;

}



.section-title h2 {

    font-size:42px;

    margin-bottom:35px;

    color:#0f3d7a;

}



.center-text {

    text-align:center;

    margin-bottom:50px;

}







/* =========================
 Learning Cards
========================= */


.overview {

    text-align:center;

}



.subtitle {

    margin-bottom:50px;

}



.learning-grid {

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}



.learn-card {

    background:white;

    padding:35px 25px;

    border-radius:20px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.06);

    transition:.3s;

}



.learn-card:hover {

    transform:translateY(-8px);

}



.learn-card span {

    color:#2563eb;

    font-weight:bold;

}



.learn-card h3 {

    margin:15px 0;

    color:#0f3d7a;

}







/* =========================
 Content Box
========================= */


.content-box {

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.06);

}



.flow {

    margin-top:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

}



.flow div {

    background:#eff6ff;

    padding:20px;

    border-radius:15px;

    color:#1d4ed8;

    font-weight:bold;

}







/* =========================
 Candlestick
========================= */


.candles {

    display:flex;

    justify-content:center;

    gap:80px;

    margin:50px 0;

}



.candle-item {

    text-align:center;

}



.candle {

    height:260px;

    width:120px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



.wick {

    width:5px;

    height:220px;

    background:#475569;

}



.body {

    position:absolute;

    width:60px;

    height:100px;

}



.red .body {

    background:#ef4444;

}



.green .body {
	
	background:#16a34a;

}




.price-info {

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.price-info div {

    background:white;

    padding:25px;

    text-align:center;

    border-radius:18px;

}







/* =========================
 Technical Indicators
========================= */


.indicator-grid {

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:30px;

}



.indicator {

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.06);

}



.indicator h3 {

    color:#0f3d7a;

    font-size:28px;

}



.english {

    font-size:14px;

    color:#2563eb;

}



.indicator li {

    margin-left:20px;

}







/* =========================
 Investment
========================= */


.investment-grid {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:25px;

}



.investment-grid div {

    background:white;

    padding:30px;

    border-radius:20px;

}





/* =========================
 Footer
========================= */


footer {

    background:#0f3d7a;

    padding:35px;

    text-align:center;

}



footer p {

    color:white;

}







/* =========================
 Responsive
========================= */


@media(max-width:900px){


.hero {

    flex-direction:column;

    text-align:center;

}


.hero h1 {

    font-size:42px;

}


.market-card {

    margin-top:50px;

}



.learning-grid,
.price-info,
.investment-grid {

    grid-template-columns:1fr;

}



.indicator-grid {

    grid-template-columns:1fr;

}



.candles {

    gap:30px;

}



}



@media(max-width:600px){


nav {

    flex-direction:column;

}


nav ul {

    margin-top:15px;

    gap:15px;

}



}