/*
Theme Name: Shanta Trader
Theme URI: https://shantatrader.com
Author: Shanta Trader
Description: A premium, single-page landing theme for the Shanta Trader trading community (Bangladesh). Copper & deep-teal palette, Bangla-first copy, built-in Telegram CTA and Customizer options.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: shanta-trader
*/

:root{
  --bg: #0A1615;
  --bg-soft: #0D1B19;
  --card: #12211F;
  --card-border: rgba(224,168,104,0.16);
  --copper: #C08552;
  --copper-bright: #E8B57C;
  --emerald: #35A583;
  --emerald-soft: #2C7A63;
  --text: #F4EFE6;
  --text-muted: #A2B0AB;
  --text-faint: #63756F;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 800px 500px at 85% -5%, rgba(224,168,104,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 5% 15%, rgba(53,165,131,0.10), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width:100%; }
a{ color:inherit; }
.serif{ font-family: 'Tiro Bangla', serif; }
.noise{
  position:fixed; inset:0; pointer-events:none; opacity:0.03; z-index:1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{ max-width: 1120px; margin:0 auto; padding: 0 28px; position:relative; z-index:2;}

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(10,22,21,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark{
  width:46px; height:46px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  border: 1.5px solid var(--copper);
  box-shadow: 0 0 0 3px rgba(224,168,104,0.08);
}
.logo-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-name{ font-family:'Tiro Bangla', serif; font-weight:400; font-size:19px; letter-spacing:0.01em; color: var(--text);}
.brand-name span{ color: var(--copper-bright); }
.nav-cta{
  font-family:'Hind Siliguri', sans-serif; font-weight:600; font-size:14.5px;
  color: var(--bg); background: var(--copper-bright);
  padding: 10px 22px; border-radius: 999px; text-decoration:none;
  transition: transform 0.2s ease, box-shadow 0.2s ease; display:inline-block;
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,181,124,0.25);}

/* ===== Hero ===== */
.hero{ position:relative; padding: 76px 0 72px; overflow:hidden; text-align:center; }
.hero-chart{
  position:absolute; left:50%; top:0; transform:translateX(-50%); width:900px; max-width:130vw; opacity:0.55;
  pointer-events:none; z-index:0;
}
.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero-emblem{
  width:128px; height:128px; border-radius:50%; overflow:hidden;
  border: 2px solid var(--copper-bright);
  box-shadow: 0 0 0 8px rgba(224,168,104,0.07), 0 20px 60px rgba(0,0,0,0.5);
  margin-bottom: 28px;
}
.hero-emblem img{ width:100%; height:100%; object-fit:cover; display:block; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.1em;
  color: var(--emerald); display:flex; align-items:center; gap:10px; margin-bottom:22px; justify-content:center;
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--emerald); box-shadow:0 0 0 4px rgba(53,165,131,0.18); }
h1{
  font-family:'Tiro Bangla', serif; font-weight:400; font-size: clamp(32px, 5.6vw, 54px);
  line-height:1.28; max-width: 720px;
}
h1 .accent{ color: var(--copper-bright); }
.hero-sub{
  margin-top:20px; max-width: 540px; color: var(--text-muted); font-size:17px; line-height:1.75;
}
.hero-actions{ margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.btn-primary{
  font-family:'Hind Siliguri', sans-serif; font-weight:700; font-size:16.5px;
  color:#0A1615; background: linear-gradient(180deg, var(--copper-bright), var(--copper));
  padding:17px 34px; border-radius:12px; text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  box-shadow: 0 14px 34px rgba(224,168,104,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(224,168,104,0.35);}
.btn-primary svg{ width:19px; height:19px; }
.hero-note{ font-size:13.5px; color: var(--text-faint); font-family:'IBM Plex Mono', monospace; }

/* ===== Stats strip ===== */
.stats{
  border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border);
  padding: 30px 0;
}
.stats-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center;
}
.stat-num{ font-family:'Tiro Bangla', serif; font-weight:400; font-size:28px; color: var(--copper-bright);}
.stat-label{ font-family:'Hind Siliguri', sans-serif; font-size:13px; color: var(--text-faint); margin-top:6px;}

/* ===== Sections ===== */
.section{ padding: 84px 0; }
.section-head{ max-width:600px; margin:0 auto 50px; text-align:center; }
.section-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.1em;
  color: var(--copper); margin-bottom:14px;
}
h2{ font-family:'Tiro Bangla', serif; font-weight:400; font-size: clamp(24px,3.2vw,32px); line-height:1.35; }
.section-sub{ color: var(--text-muted); margin-top:14px; font-size:16px; }

.feature-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
.feature-card{
  background: var(--card); border:1px solid var(--card-border); border-radius:16px;
  padding: 30px; transition: border-color 0.25s ease, transform 0.25s ease;
}
.feature-card:hover{ border-color: rgba(224,168,104,0.45); transform: translateY(-3px); }
.feature-icon{
  width:46px; height:46px; border-radius:12px; margin-bottom:20px;
  background: rgba(224,168,104,0.1); display:flex; align-items:center; justify-content:center;
}
.feature-icon svg{ width:23px; height:23px; stroke: var(--copper-bright); }
.feature-title{ font-family:'Tiro Bangla', serif; font-weight:400; font-size:19px; margin-bottom:10px;}
.feature-text{ color: var(--text-muted); font-size:15px; line-height:1.75; }

/* ===== Flow ===== */
.flow{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; position:relative; }
.flow::before{
  content:''; position:absolute; top:23px; left:8%; right:8%; height:1px;
  background: linear-gradient(90deg, transparent, var(--card-border) 15%, var(--card-border) 85%, transparent);
}
.flow-item{ text-align:center; padding: 0 16px; position:relative; }
.flow-dot{
  width:48px; height:48px; border-radius:50%; margin:0 auto 20px;
  background: var(--bg-soft); border:1.5px solid var(--copper); display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; color: var(--copper-bright); font-size:14px; position:relative; z-index:2;
}
.flow-title{ font-family:'Tiro Bangla', serif; font-weight:400; font-size:18px; margin-bottom:8px;}
.flow-text{ color: var(--text-muted); font-size:14.5px; max-width:230px; margin:0 auto; line-height:1.7; }

/* ===== Final CTA ===== */
.cta-band{
  background: var(--card); border:1px solid var(--card-border); border-radius:24px;
  padding: 64px 40px; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(224,168,104,0.14), transparent 70%);
  top:-180px; right:-140px;
}
.cta-band::after{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(53,165,131,0.12), transparent 70%);
  bottom:-160px; left:-120px;
}
.cta-band h2{ max-width:480px; margin:0 auto 16px; position:relative; z-index:2; }
.cta-band .section-sub{ max-width:440px; margin-left:auto; margin-right:auto; position:relative; z-index:2;}
.cta-band .btn-primary{ margin-top:28px; position:relative; z-index:2;}

/* ===== Footer ===== */
.site-footer{ border-top:1px solid var(--card-border); padding: 40px 0 32px; }
.footer-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.disclaimer{ font-size:12.5px; color: var(--text-faint); max-width:640px; line-height:1.85; }
.foot-brand{ font-family:'Tiro Bangla', serif; color: var(--text-muted); font-size:14px; display:flex; align-items:center; gap:8px;}
.foot-brand img{ width:24px; height:24px; border-radius:50%; object-fit:cover; }

@media (max-width: 760px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap:24px; }
  .feature-grid{ grid-template-columns: 1fr; }
  .flow{ grid-template-columns: 1fr; row-gap:36px; }
  .flow::before{ display:none; }
  .cta-band{ padding: 48px 22px; }
  .hero-emblem{ width:104px; height:104px; }
}