

:root{
  --gold:#c99a2e;
  --gold-light:#f0d277;
  --gold-deep:#8a6516;
  --ink:#000;
  --paper:#fff;
  --line:#e9e3d3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}


.container{max-width:1620px;}
@media(min-width:1400px){
	.container{max-width:1370px;}
}
@media(max-width:1370px){
	.container{max-width:1270px;}
}


body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",sans-serif;
  overflow-x:hidden;
}
.site-header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(12px);
}
.site-header .navbar-brand{padding:0px;}
.brand-logo{width:112px;height:auto;display:block}
.nav-link{color:#111!important;font-size:.69rem;letter-spacing:.035em;padding:.55rem .2rem!important;position:relative}
.nav-link::after{content:"";position:absolute;left:0;bottom:.1rem;width:0;height:2px;background:var(--gold);transition:.25s}
.nav-link:hover::after{width:100%}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  border:1px solid var(--gold);
  color:#111;
  font-weight:700;
  box-shadow:0 10px 28px rgba(201,154,46,.23);
}
.btn-gold:hover{background:linear-gradient(135deg,#f5dc93,#b78619);color:#000;transform:translateY(-1px)}
.btn{
    font-size: .72rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .02em;
    transition: .25s;
    padding: 10px 20px 8px;	
}
.hero-section{
  min-height:100vh;
  padding-top:68px;
  position:relative;
  background:
    radial-gradient(circle at 78% 42%,rgba(240,210,119,.22),transparent 27%),
    radial-gradient(circle at 62% 70%,rgba(201,154,46,.10),transparent 30%),
    #fff;
}
.hero-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.022) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to right,transparent,black 45%,black 100%);
}
.hero-copy{position:relative;z-index:2}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.17em;color:var(--gold-deep)}
.display-title{font-size:clamp(3rem,4.8vw,5.4rem);line-height:1.04;letter-spacing:-.055em;font-weight:500;max-width:790px}
.lead-copy{font-size:1rem;line-height:1.6;max-width:520px;color:#2e2e2e}
.feature-row{font-size:.66rem;font-weight:700;letter-spacing:.045em;color:#2f2f2f}
.feature-row span::first-letter{color:var(--gold)}
.hero-visual{min-height:620px;display:flex;align-items:center;justify-content:center;z-index:1}
.coin-scene{position:relative;width:min(620px,100%);aspect-ratio:1/1;filter:drop-shadow(0 28px 30px rgba(0,0,0,.12))}
.orbital-ring{position:absolute;border:1px solid rgba(201,154,46,.35);border-radius:50%;inset:10%;animation:spin 20s linear infinite}
.ring-2{inset:24%;border-style:dashed;animation-direction:reverse;animation-duration:15s}
.orbital-ring::before,.orbital-ring::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(201,154,46,.09)}
.orbital-ring::before{top:6%;left:23%}.orbital-ring::after{bottom:12%;right:18%}
.coin{position:absolute;border-radius:50%;display:grid;place-items:center;font-weight:800;border:4px solid rgba(255,255,255,.72);box-shadow:inset 0 0 0 2px rgba(108,74,0,.18),0 18px 35px rgba(92,62,0,.20);animation:float 5s ease-in-out infinite}
.coin::before{content:"";position:absolute;inset:8%;border:1px dashed rgba(104,72,0,.36);border-radius:50%}
.coin span{position:relative;z-index:2;text-shadow:0 2px 4px rgba(255,255,255,.6)}
.coin-a{width:185px;height:185px;left:9%;top:33%;font-size:4rem;background:linear-gradient(145deg,#f6df93,#b47c12);color:#75500c;transform:rotate(-13deg)}
.coin-b{width:175px;height:175px;right:8%;top:7%;font-size:4rem;background:linear-gradient(145deg,#fff5cc,#d4a43d);color:#8e6517;animation-delay:-1s}
.coin-c{width:155px;height:155px;left:30%;top:4%;font-size:4rem;background:linear-gradient(145deg,#f0d26d,#9e6d13);color:#6f4a00;animation-delay:-1.7s}
.coin-d{width:160px;height:160px;right:0;top:40%;font-size:4rem;background:linear-gradient(145deg,#fff8df,#cba74e);color:#926a1a;animation-delay:-2.3s}
.coin-e{width:170px;height:170px;right:11%;bottom:5%;font-size:4rem;background:linear-gradient(145deg,#f4dd96,#b27c13);color:#76500c;animation-delay:-.5s}
.coin-f{width:150px;height:150px;left:24%;bottom:1%;font-size:2.2rem;background:linear-gradient(145deg,#fff8df,#cfaa4b);color:#76500c;animation-delay:-3s}
.center-medallion{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:205px;height:205px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9dc 0,#e9bf53 38%,#ad7611 72%,#654200 100%);border:7px solid #efd47f;box-shadow:0 24px 60px rgba(112,77,4,.35),inset 0 0 0 3px #7f590f;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#4d3300;z-index:4}
.center-medallion::after{content:"";position:absolute;inset:12px;border:2px dashed rgba(87,58,0,.35);border-radius:50%}
.center-medallion strong{z-index:2;font-size:1.35rem;letter-spacing:.14em;margin-top:10px}
.mini-chart{display:flex;align-items:flex-end;gap:7px;height:55px;z-index:2}
.mini-chart i{display:block;width:12px;background:#4f3500;border-radius:2px 2px 0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* professional traders section */
.pro-traders{padding:92px 0 100px;background:#fff}.section-title{font-size:clamp(42px,4.7vw,70px);line-height:1.02;letter-spacing:-.045em;font-weight:500;margin:0;max-width:1200px}.text-gold{color:var(--gold-3)}.section-subtitle{margin-top:26px;font-size:15px;color:#242424;max-width:900px}.feature-card{height:100%;min-height:470px;border:1px solid #f0ead8;border-radius:0 0 32px 32px;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fff 33%,#fbf8ef 70%,#f5edd8 100%);transition:.3s ease;position:relative}.feature-card:hover{transform:translateY(-7px);box-shadow:0 22px 55px rgba(89,64,6,.12);border-color:#e4d29d}.feature-visual{height:250px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.feature-visual::after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(242,214,117,.28),transparent 68%)}.feature-content{padding:26px 28px 30px;position:relative;z-index:2}.feature-content h3{font-size:20px;line-height:1.1;font-weight:750;margin-bottom:20px}.feature-content p{font-size:14px;line-height:1.35;margin:0;color:#222}

/* CSS illustrations */
.percent-art{position:relative;width:185px;height:185px;z-index:2;transform:rotate(-12deg)}.percent-art .slash{position:absolute;left:82px;top:12px;width:30px;height:160px;border-radius:18px;background:linear-gradient(90deg,#fff6cd,#d2a72f,#8d6509);box-shadow:0 12px 28px rgba(89,64,6,.18);transform:rotate(35deg)}.percent-art .dot{position:absolute;width:62px;height:62px;border:15px solid #d4af37;border-radius:50%;box-shadow:inset 0 0 0 2px #fff5c2,0 12px 22px rgba(89,64,6,.16)}.percent-art .dot.one{left:8px;top:13px}.percent-art .dot.two{right:0;bottom:20px}
.shield-art{position:relative;width:190px;height:190px;z-index:2}.shield-ring{position:absolute;inset:12px;border-radius:50%;border:28px solid #efe3ba;border-right-color:#d4af37;transform:rotate(28deg);box-shadow:0 14px 28px rgba(89,64,6,.13)}.shield{position:absolute;width:96px;height:110px;left:47px;top:34px;background:linear-gradient(145deg,#fff8db,#d5ac35);clip-path:polygon(50% 0,90% 14%,84% 68%,50% 100%,16% 68%,10% 14%);box-shadow:0 12px 30px rgba(60,43,0,.2)}.shield:before{content:"";position:absolute;width:45px;height:23px;border-left:8px solid #111;border-bottom:8px solid #111;transform:rotate(-45deg);left:26px;top:38px}
.candle-art{position:relative;width:220px;height:170px;z-index:2}.candle{position:absolute;width:26px;border-radius:4px;background:linear-gradient(90deg,#fff8d9,#d6ae3a,#9c7517);box-shadow:0 10px 18px rgba(80,58,5,.15)}.candle:before{content:"";position:absolute;width:3px;height:calc(100% + 44px);background:#a37a16;left:50%;top:-22px}.c1{height:68px;left:12px;bottom:18px}.c2{height:100px;left:72px;bottom:42px}.c3{height:58px;left:132px;bottom:10px}.c4{height:122px;right:10px;bottom:36px}.buy-badge{position:absolute;top:4px;left:18px;padding:8px 14px;border-radius:10px;background:#fff6c8;border:1px solid #e4c356;font-size:18px;font-weight:900;color:#8d680e;box-shadow:0 8px 18px rgba(89,64,6,.12)}
.depth-art{position:relative;width:190px;height:210px;z-index:2}.depth-board{position:absolute;inset:10px 20px;border-radius:20px;background:linear-gradient(145deg,#fff,#e7dcc0);box-shadow:0 20px 35px rgba(70,51,5,.15);transform:rotate(7deg);border:1px solid #e4d29d}.depth-stick{position:absolute;width:18px;border-radius:4px;background:linear-gradient(90deg,#fff7d4,#d1a62c,#9b7315);z-index:2}.depth-stick:after{content:"";position:absolute;width:2px;height:calc(100% + 45px);background:#9f7b21;left:50%;top:-22px}.d1{height:45px;left:45px;top:58px}.d2{height:86px;left:78px;top:76px}.d3{height:58px;right:56px;top:50px}.d4{height:72px;right:28px;top:88px}

@media (max-width:991.98px){.section-title{font-size:46px}.feature-card{min-height:440px}.feature-visual{height:230px}}
@media (max-width:575.98px){.section-title{font-size:39px}.section-subtitle{font-size:14px}.feature-card{border-radius:0 0 24px 24px}.feature-content{padding:24px}.feature-visual{height:220px}}
/* -----------------------------------
   MARKETS SECTION
----------------------------------- */

.markets-section{
    background:var(--paper);
    padding:80px 0 90px;
}


/* Heading */

.markets-heading h2{
    margin:0;

    font-size:48px;
    line-height:1.04;
    letter-spacing:-2.2px;
    font-weight:500;

    color:var(--ink);
}

.markets-heading h2 span{
    color:var(--gold);
}


/* Divider */

.section-divider{
    height:1px;
    background:var(--line);

    width:100%;
    margin:35px 0 32px;
}


/* -----------------------------------
   MARKET CARD
----------------------------------- */

.market-card{
    position:relative;

    min-height:450px;
    height:100%;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfaf3 50%,
            #f6ead0 100%
        );

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* hover */

.market-card:hover{
    transform:translateY(-7px);

    border-color:rgba(201,154,46,.45);

    box-shadow:
        0 20px 50px rgba(0,0,0,.08),
        0 8px 25px rgba(201,154,46,.08);
}


/* Gold glow */

.market-card::before{
    content:"";

    position:absolute;
    width:230px;
    height:230px;

    border-radius:50%;

    right:-90px;
    top:-100px;

    background:
        radial-gradient(
            circle,
            rgba(240,210,119,.26) 0%,
            rgba(240,210,119,0) 70%
        );

    pointer-events:none;
}


/* -----------------------------------
   CARD CONTENT
----------------------------------- */

.market-content{
    position:relative;
    z-index:2;

    padding:30px 30px 0;
}

.market-content h3{
    margin:0 0 18px;

    color:var(--ink);

    font-size:21px;
    line-height:1.2;
    font-weight:600;
}

.market-content p{
    max-width:92%;

    margin:0;

    font-size:13px;
    line-height:1.45;

    color:#333;
}


/* -----------------------------------
   CARD IMAGE
----------------------------------- */

.market-image{
    position:absolute;

    bottom:-3px;
    left:0;

    width:100%;
    height:65%;

    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.market-image img{
    display:block;

    width:auto;
    max-width:92%;
    max-height:100%;

    object-fit:contain;

    transition:transform .4s ease;
}

.market-card:hover .market-image img{
    transform:scale(1.035);
}


/* -----------------------------------
   OPTIONAL GOLD TOP DETAIL
----------------------------------- */

.market-card::after{
    content:"";

    position:absolute;

    left:30px;
    top:0;

    width:45px;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--gold-deep),
            var(--gold-light)
        );

    border-radius:0 0 5px 5px;

    opacity:0;
    transition:.3s;
}

.market-card:hover::after{
    opacity:1;
}


/* -----------------------------------
   TABLET
----------------------------------- */

@media(max-width:991.98px){

    .markets-section{
        padding:65px 0;
    }

    .markets-heading h2{
        font-size:42px;
        letter-spacing:-1.8px;
    }

    .market-card{
        min-height:430px;
    }

}


/* -----------------------------------
   MOBILE
----------------------------------- */

@media(max-width:767.98px){

    .markets-section{
        padding:50px 0;
    }

    .markets-heading h2{
        font-size:34px;
        line-height:1.08;
        letter-spacing:-1.4px;
    }

    .section-divider{
        margin:25px 0;
    }

    .market-card{
        min-height:430px;
        border-radius:23px;
    }

    .market-content{
        padding:25px 24px 0;
    }

    .market-content h3{
        font-size:20px;
        margin-bottom:13px;
    }

    .market-content p{
        font-size:13px;
        max-width:100%;
    }

}


/* -----------------------------------
   SMALL MOBILE
----------------------------------- */

@media(max-width:480px){

    .markets-heading h2{
        font-size:30px;
    }

    .market-card{
        min-height:400px;
    }

    .market-image{
        height:61%;
    }

}

@keyframes float{0%,100%{margin-top:0}50%{margin-top:-12px}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:991.98px){
  .site-header{background:#fff}.navbar-collapse{padding:1rem 0 1.2rem}.brand-logo{width:96px}
  .hero-section{padding-top:74px}.hero-copy{text-align:center}.lead-copy{margin-inline:auto}.hero-copy .d-flex,.feature-row{justify-content:center}
  .hero-visual{min-height:520px}.coin-scene{max-width:500px}.display-title{font-size:clamp(2.65rem,9vw,4.4rem)}
}
@media (max-width:575.98px){
  .hero-visual{min-height:390px}.coin-scene{width:360px}.coin-a{width:112px;height:112px;font-size:2.7rem}.coin-b{width:105px;height:105px;font-size:2.7rem}.coin-c{width:95px;height:95px;font-size:2.5rem}.coin-d{width:100px;height:100px;font-size:2.7rem}.coin-e{width:105px;height:105px;font-size:2.5rem}.coin-f{width:92px;height:92px;font-size:1.35rem}.center-medallion{width:132px;height:132px;border-width:5px}.center-medallion strong{font-size:.85rem}.mini-chart{height:35px;gap:4px}.mini-chart i{width:8px}.feature-row{font-size:.58rem;gap:12px!important}
}
