/* Fuelco Trade — styles.css (Dark theme + responsive team + Market panel)
   - Dark theme everywhere
   - Mobile burger uses .is-open
   - Team grid: Desktop 6-in-row, Tablet 3+3, Mobile 2+2+2 (all visible in portrait)
   - Hero Market panel: right side on desktop, centered on mobile; mobile shows Brent only
*/

:root{
  --bg:#0b0f17;
  --bg2:#0f1623;
  --surface: rgba(20,24,35,.86);
  --surface2: rgba(16,19,28,.78);
  --stroke: rgba(255,255,255,.08);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);

  --accent:#2F6BFF;

  --r:16px;
  --shadow:0 10px 40px rgba(0,0,0,.60);
  --max:1140px;

  /* Market panel sizing */
  --market-w: 240px;     /* desktop panel width */
  --market-w-sm: 200px;  /* mobile panel width */
  --market-offset: 56px; /* drop panel to align with H1 area */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}

/* ===== Header / Nav ===== */
.header{
  position:sticky; top:0; z-index:20;
  background: rgba(11,15,23,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.header__line{height:1px; background: rgba(255,255,255,.06)}

.brand{display:flex; align-items:center; gap:10px}
.brand__logo{display:block}
.brand__logo img{display:block; height:52px; width:auto}
.brand__name{font-weight:900; letter-spacing:.2px}
.brand__tagline{font-size:12px;color:var(--muted); margin-top:2px}

.nav{position:relative}
.nav__toggle{
  display:none;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.nav__toggle span{
  display:block;width:18px;height:2px;
  background:rgba(255,255,255,.86);
  margin:4px auto;border-radius:2px;
}

.nav__menu{display:flex;align-items:center;gap:10px}
.nav__menu a{padding:10px 12px;border-radius:12px;color:var(--muted)}
.nav__menu a:hover{background: rgba(255,255,255,.04); color: var(--text)}
.nav__menu a.active{
  color: var(--text);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}
.nav__menu .nav__quote{
  border: 1px solid rgba(47,107,255,.35);
  background: rgba(47,107,255,.14);
  color: rgba(255,255,255,.92);
}

/* ===== Hero / sections ===== */
.hero{padding:52px 0 18px; position:relative; overflow:hidden}

/* ✅ FIX: target the REAL markup (.hero__grid is inside .container) */
.hero__grid{
  display:grid;
  grid-template-columns: 1fr minmax(280px, var(--market-w));
  gap:34px;
  align-items:start;
}

/* keep title/subtitle styles */
.hero__title{font-size:clamp(34px, 4.2vw, 56px); line-height:1.08; margin:14px 0 12px}
.hero__subtitle{margin:0 0 18px; color: var(--muted); max-width:70ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:18px}

.stat{
  border:1px solid var(--stroke);
  border-radius:14px;
  background: rgba(255,255,255,.03);
  padding:10px 12px;
  display:flex; flex-direction:column; gap:4px;
}
.stat b{font-size:18px}
.stat span{color: var(--muted); font-size:12px}

.section{padding:72px 0}
.section--alt{
  background: rgba(255,255,255,.02);
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.section__head{display:flex; flex-direction:column; gap:10px; margin-bottom:22px}
.section__title{font-size:clamp(26px, 3.2vw, 40px); margin:0}
.section__desc{margin:0; color: var(--muted); max-width:72ch}

.page{
  padding:52px 0 10px;
  border-bottom:1px solid var(--stroke);
  background: rgba(255,255,255,.01);
}
.page__title{font-size:clamp(32px, 4vw, 48px); margin:0 0 10px}
.page__desc{margin:0; color: var(--muted); max-width:72ch}

.grid{display:grid; gap:14px}
.grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2, minmax(0,1fr))}

/* ===== UI ===== */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  width:fit-content;
}
.pill__dot{width:8px;height:8px;border-radius:50%; background: rgba(255,255,255,.65)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  font-weight:800;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px); background: rgba(255,255,255,.05)}
.btn--primary{
  border-color: rgba(47,107,255,.45);
  background: linear-gradient(180deg, rgba(47,107,255,.22), rgba(255,255,255,.03));
}
.btn--block{width:100%}

.lead{color: var(--muted); margin: 10px 0 0}

/* ===== Cards / panels ===== */
.card, .panel, .clock, .team-card{
  border:1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card{padding:16px}
.card__title{margin:0 0 8px; font-size:18px}
.card__text{margin:0; color: var(--muted)}

.split{display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start}
.panel{padding:16px}
.panel--accent{
  background: linear-gradient(180deg, rgba(47,107,255,.18), rgba(255,255,255,.03));
  border-color: rgba(47,107,255,.30);
}

/* ===== Forms ===== */
.form{display:grid; gap:12px}
.label{display:grid; gap:8px; color: rgba(255,255,255,.82); font-weight:800; font-size:13px}
.input,.textarea, .form input, .form select, .form textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: var(--surface2);
  color: var(--text);
  outline:none;
  font: inherit;
}
.form textarea{ resize: vertical; min-height: 120px; }
.input:focus,.textarea:focus, .form input:focus, .form select:focus, .form textarea:focus{
  border-color: rgba(47,107,255,.55);
  box-shadow: 0 0 0 4px rgba(47,107,255,.16);
}
.form__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.form__grid .full{ grid-column: 1 / -1; }
.form__actions{display:flex; gap: 14px; align-items:center; margin-top: 16px; flex-wrap: wrap;}
.form-msg{margin-top:12px; padding:10px 12px; border-radius:12px; font-size:14px;}
.form-msg.ok{background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.35)}
.form-msg.err{background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.35)}
.hint{margin:0; color: var(--muted); font-size:13px; min-height:18px}

/* ===== Team ===== */
.team{ padding: 34px 0 10px; }

.team-avatar{
  width:100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  border:1px solid var(--stroke);
}
.team-avatar picture, .team-avatar img{ width:100%; height:100%; display:block; }
.team-avatar img{ object-fit: cover; object-position: center top; }

.team-card{ overflow:hidden; display:flex; flex-direction:column; }
.team-card .meta{ padding: 14px 14px 16px; line-height: 1.2; text-align:center; }
.team-card .name{ font-weight: 800; }
.team-card .role{ opacity:.85; font-size: .95rem; margin-top: 6px; }

.team-grid{ display:grid; gap:24px; margin-top:24px; }
@media (min-width: 1100px){ .team-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 700px) and (max-width: 1099px){ .team-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px){
  .team-grid{ grid-template-columns: repeat(2, 1fr); gap:16px; }
  .team-card{ transform: scale(.90); transform-origin: top center; }
}

/* ===== Clocks ===== */
.clocks{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.clock{ padding: 14px 14px 16px; }
.clock h3{ margin: 0 0 8px; font-size: 1rem; letter-spacing: .02em; color: rgba(255,255,255,.88); }
.clock .time{
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== Map ===== */
.map, .map-wrap{
  border:1px solid var(--stroke);
  border-radius: var(--r);
  overflow:hidden;
  background: rgba(255,255,255,.03);
}
.map iframe, .map-wrap iframe{width:100%; height:360px; border:0; filter:saturate(.85) contrast(1.05) brightness(.92)}

/* ===== Footer ===== */
.footer{
  border-top:1px solid var(--stroke);
  padding:30px 0 20px;
  background: rgba(0,0,0,.18);
}
.footer__list{list-style:none; padding:0; margin:0; display:grid; gap:8px; color: var(--muted)}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .map iframe, .map-wrap iframe{height:320px}
  .clocks{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .nav__toggle{display:block}
  .nav__menu{
    position:absolute; right:0; top:56px;
    min-width: 240px;
    padding:10px;
    border-radius:18px;
    border:1px solid var(--stroke);
    background: rgba(11,15,23,.96);
    box-shadow: var(--shadow);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .nav__menu.is-open{display:flex}
}

/* Brand logo */
.brand__logo { display: block; }
.brand__logo img { height: 50px; width: auto; display: block; }
@media (max-width: 768px){ .brand__logo img { height: 40px; } }

/* =========================================================
   Market panel (TradingView widgets) — clean + symmetric
   ========================================================= */

.hero__panel{
  width: min(100%, var(--market-w));
  justify-self: end;
  align-self: start;
  margin-top: var(--market-offset);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 10px;
}

.hero__panel .panel__title{
  font-weight: 900;
  margin: 0 0 12px;
  color: rgba(255,255,255,.88);
  letter-spacing: .02em;
}

.tv-quote{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
}
.tv-quote + .tv-quote{ margin-top: 12px; }

.price-note{
  margin: 10px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

/* Desktop: slightly smaller without transform glitches */
@media (min-width: 961px){
  :root{ --market-w: 380px; }
  .hero__panel{ padding: 10px; }
  .tv-quote{ padding: 8px 10px; }
}

/* Mobile: center + only Brent */
@media (max-width: 960px){
  .hero__panel{
    width: min(100%, var(--market-w-sm));
    justify-self: center;
    margin: 18px auto 0;
  }
  /* Hide WTI (second card) on mobile */
  .hero__panel .tv-quote + .tv-quote{
    display:none !important;
  }
  .hero__panel .price-note{ display:none; }
}
/* ===== Market panel scale (height smaller, width same visually) ===== */

.hero__panel{
  transform: scaleY(0.70);   /* 0.7 = -30% | 0.6 = -40% */
  transform-origin: top;
}

/* Чтобы не съехала верстка */
.hero__panel{
  margin-bottom: -120px;  /* подгони число при необходимости */
}
/* ===== Mobile: symmetric + scaled Market ===== */
@media (max-width: 960px){

  .hero__panel{
    width: min(100%, 360px);
    margin: 20px auto 0;
    transform: scale(0.75);          /* уменьшение примерно на 25% */
    transform-origin: top center;    /* строго по центру */
  }

}