/* ───────────────────── 1. BASE TOKENS ───────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box
}

:root {
  --clr-bg-900: #F5F7FA;
  --clr-bg-700: #161616;
  --clr-bg-500: #252525;
  --clr-primary: #0D1129;
  --clr-accent: #a8a8a8;

  --ff-base: 'Lato', sans-serif;
  --ff-heading: 'Cinzel', serif;
  --step--2: clamp(.66rem, .76vw, .8rem);
  --step--1: clamp(.75rem, .9vw, .95rem);
  --step-0: clamp(.88rem, 1vw, 1.06rem);
  --step-1: clamp(1rem, 1.1vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.35vw, 1.56rem);
  --step-3: clamp(1.56rem, 1.75vw, 1.95rem);
}



html {
  scroll-behavior: smooth;
  font-size: 100%
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font: var(--step-0)/1.45 var(--ff-base);
  color: var(--clr-primary);
  background-image: linear-gradient(160deg, #F5F7FA 0%, #e4e8f0 100%);
}

/* utilities */
.flow>*+* {
  margin-block-start: var(--flow-space, 1em)
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .65em 1.1em;
  font: var(--step--1) var(--ff-base);
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border-radius: 1.3em;
  background: linear-gradient(145deg, #474747, #242424);
  border: 1px solid #3d3d3d;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.btn:hover {
  background: linear-gradient(145deg, #454545, #1a1a1a);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
  border-color: #555;
}

.clamp-img {
  width: 100%;
  height: auto;
  border-radius: .75rem
}

/* keyframes */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-.25rem)
  }

  100% {
    opacity: 1
  }
}

@keyframes down {

  0%,
  40% {
    transform: translateY(0)
  }

  20% {
    transform: translateY(.55rem)
  }
}

/* ───────────────────── 2. GLOBAL LAYOUT ─────────────────── */
/* 2.1 header */
.header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem clamp(1rem, 4vw, 2.25rem);
  background: rgba(245, 247, 250, 0.8);
  backdrop-filter: blur(6px);
}

.brand {
  font: var(--step-1) var(--ff-heading);
  font-weight: 600;
  color: var(--clr-primary);
  text-decoration: none
}

.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .75rem;
}

.nav-right {
  display: flex;
  gap: .75rem;
  align-items: center;
}

/* 2.2 hero (index only) */
.hero {
  flex: 1;
  min-height: 75vh;
  background-color: #F5F7FA;

  /* Un gradient subtil care merge de la Ice White spre un gri foarte deschis */
  /* Creează o senzație de adâncime și lumină "rece" */
  background-image: linear-gradient(160deg, #F5F7FA 0%, #e4e8f0 100%);
  display: grid;
  place-content: center;
  text-align: center;
  padding: clamp(4rem, 9vw, 10rem) 2rem;
  animation: fadeIn 1s forwards;
  grid-template-columns: 1fr;
  justify-items: center;
  position: relative;
}

.hero>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero h1 {
  font: var(--step-3)/1.15 var(--ff-heading);
  margin: 0;
  background-color: #F5F7FA;
  color: #0D1129;
  padding: 0.5rem 1rem;
  display: inline-block;
  border-radius: 1rem;
}

.hero p {
  font: var(--step-1);
  max-width: 45ch;
  margin-inline: auto;
  background-color: #F5F7FA;
  color: #0D1129;
  padding: 0.5rem 1rem;
  display: inline-block;
  margin-top: 1rem;
  border-radius: 1rem;
}

.hero .btn {
  margin-block-start: 1.6rem;
  background: linear-gradient(145deg, #474747, #242424);
  color: white;
  border: 1px solid white;
  padding: 0.75em 1.3em;
  font-size: var(--step-0);
}

.hero .btn:hover {
  background: linear-gradient(145deg, #454545, #1a1a1a);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
  border-color: #555;
}

/* 2.3 page banner (carti & filme) */
.page-banner {
  /* background: linear-gradient(#555 0%, #a1a1a1 100%); Removed gradient */
  text-align: center;
  padding: 3rem 2rem 1rem;
  /* Reduced bottom padding */
  padding-top: 8rem;
  /* Added to clear fixed header and lower title */
}

.page-banner h1 {
  margin: 0;
  font: var(--step-3) var(--ff-heading);
}

/* 2.4 content layout with optional sidebar */
.layout {
  padding: clamp(2rem, 6vw, 3rem)
}

@media(min-width:768px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(200px, 250px) 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* 2.5 sidebar */
.sidebar {
  background: #424242;
  color: #F0F8FF;
  /* White Ice */
  padding: 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 0 .75rem rgba(0, 0, 0, .25);
  height: fit-content;
}

@supports(position:sticky) {
  .sidebar {
    position: sticky;
    top: 7rem
  }
}

.sidebar a {
  display: block;
  color: #F0F8FF;
  /* White Ice */
  text-decoration: none;
  padding: .4rem .25rem;
  border-radius: .3rem
}

.sidebar a:hover {
  background: #525252
}

/* 2.6 card grid (books & films) */
.card-grid {
  --min: 260px;
  display: grid;
  gap: clamp(1rem, 3vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
}

.card {
  background: #1f1f1f;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: fadeIn .8s both;
}

.card img {
  object-fit: cover;
  max-height: 260px;
  width: 100%
}

.card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.card h3 {
  font: var(--step-1)/1.2 var(--ff-base);
  margin: 0;
  color: #F0F8FF;
  /* White Ice */
}

.card p {
  font: var(--step--1);
  margin: 0;
  color: #e0e0e0
}

.card .btn {
  align-self: flex-start;
  margin-top: auto;
  background-color: white;
  color: #F5F7FA;
  border: 1px solid #ffffff;
}

.card .btn:hover {
  background-color: #f0f0f0;
  color: #caccce;
}

/* 2.7 contact section (RESTORED) */
.contact {
  background-image: linear-gradient(160deg, #F5F7FA 0%, #e4e8f0 100%);
  padding-block: 4rem
}

.contact-wrapper {
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
}

@media(min-width:900px) {
  .contact-wrapper {
    grid-template-columns: 1fr 1fr
  }
}

.contact-form {
  display: grid;
  gap: 1rem;
  background: #ffffff;
  /* Changed from #141414 to white */
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  /* Added shadow for depth on white bg */
}

.contact-form h2 {
  margin: 0;
  font: var(--step-1) var(--ff-base);
  color: #0D1129 !important;
  /* Force dark text for visibility on white */
  cursor: pointer;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid #ccc;
  /* Added visible border */
  border-radius: .75rem;
  font: var(--step--1) var(--ff-base);
  color: #000;
  background: #F5F7FA;
  transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #0D1129;
  /* Highlight border on focus */
}

.contact-form .alert {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-weight: bold;
}

.contact-form .alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.contact-form .alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Specific button style for contact form */
.contact-form .btn {
  background: #0D1129;
  /* Theme Blue */
  color: #ffffff;
  border: none;
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
  padding: 1rem;
}

.contact-form .btn:hover {
  background: #1a2255;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(13, 17, 41, 0.3);
}

.contact-form textarea {
  min-height: 8rem;
  resize: vertical
}

.contact-info {
  color: #252525;
  font: var(--step-0) var(--ff-base)
}

.contact-info p {
  margin: 0
}

.contact-info a {
  color: #000000;
  text-decoration: underline
}

.mapouter {
  width: 100%;
  aspect-ratio: 650/450;
  position: relative
}

.gmap_iframe {
  width: 100% !important;
  height: 100% !important;
  border-radius: .75rem
}

/* 2.8 footer */
.footer {
  background: var(--clr-bg-700);
  margin-top: auto;
  padding: 2rem 1rem;
  text-align: center;
}

.social-list {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0
}

.fab {
  padding: .8rem;
  font-size: 1.25rem;
  width: 2.5rem;
  text-align: center;
  border-radius: 1rem;
  color: #ccc;
  text-decoration: none;
}

.fa-linkedin {
  background: #007bb5
}

.fa-facebook {
  background: #3B5998
}

.fa-youtube {
  background: #bb0000
}

.fa-instagram {
  background: #125688
}

.fab:hover {
  opacity: .85
}

/* 2.9 scroll indicator (index only) */
.scroll-indicator {
  --sz: 3rem;
  width: var(--sz);
  height: var(--sz);
  border: 2px solid #000000;
  border-radius: 50%;
  position: absolute;
  bottom: 3rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  animation: down 1.5s infinite;
}

.scroll-indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40%;
  height: 40%;
  border-left: 2px solid #000000;
  border-bottom: 2px solid #000000;
  transform: rotate(-45deg);
}

/* ───────────────────── 3. MEDIA QUERIES ─────────────────── */
@media(min-width:576px) {
  .hero {
    padding: 6rem 2rem
  }
}

@media(min-width:768px) {
  .header {
    padding: .9rem clamp(2rem, 5vw, 3rem)
  }

  .nav .btn {
    font: var(--step-0)
  }
}



/* ─── featured images on the homepage ─── */
.featured-img {
  max-width: 420px;
  /* hard ceiling on width */
  margin-inline: auto;
  /* centres on mobile; sits flush in grid on desktop */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  animation: fadeIn .8s both;
}

.featured-img img {
  display: block;
  width: 100%;
  height: auto
}

@media(min-width:992px) {

  /* give them a little stagger for large screens */
  .featured-img:first-of-type {
    transform: translateY(10%)
  }
}

/* ─── homepage featured images ───────────────────────────── */
.featured-img {
  position: relative;
  max-width: 480px;
  /* never exceed this width */
  aspect-ratio: 4/3;
  /* elegant, consistent shape */
  border-radius: 1rem;
  overflow: hidden;
  margin-inline: auto;
  /* centre on phones */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  animation: fadeIn .8s both;
}

@media(min-width:992px) {

  /* adds a gentle stagger on wide screens */
  .featured-img:first-of-type {
    transform: translateY(10%)
  }
}

.featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fills the rectangle */
}

.featured-img figcaption {
  position: absolute;
  inset: auto 0 0 0;
  /* pinned to bottom */
  padding: .6rem 1rem;
  background: rgba(0, 0, 0, .6);
  color: var(--clr-primary);
  font: var(--step--1) var(--ff-base);
  line-height: 1.35;
  transform: translateY(100%);
  /* hidden below */
  transition: transform .35s ease;
}

.featured-img:hover figcaption,
.featured-img:focus-within figcaption {
  transform: translateY(0);
  /* slide up on hover/tap */
}

/* ─── side-by-side featured images  (homepage only) ─── */
.featured-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.featured-pair .featured-img {
  flex: 1 1 280px;
  max-width: 420px
}

/* stagger the second image on medium+ screens */
@media(min-width:768px) {
  .featured-pair .featured-img:nth-child(2) {
    transform: translateY(10%)
  }
}

/* ─── fine-tune homepage image pair ─────────────────────── */

/* push the whole fpage block a bit taller so cards never overlap the
   grey contact section that follows */
.fpage {
  padding-bottom: 6rem;
  /* was 4rem; adds 2rem breathing room */
}

/* centre horizontally, align to the top edge so margin-top works */
.featured-pair {
  justify-content: center;
  align-items: flex-start
}

/* stagger: right-hand card lower than the left on medium+ screens */
@media(min-width:768px) {
  .featured-pair .featured-img:nth-child(2) {
    margin-top: 2.5rem;
    /* ≈40 px drop */
    transform: none;
    /* remove previous translateY if present */
  }
}

/* ─── Info Grid Layout ─── */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  max-width: 1200px;
  margin-inline: auto;
}

.info-row {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media(min-width: 768px) {
  .info-row {
    grid-template-columns: 1fr 1fr;
  }

  /* For the reverse row, swap order visually if needed, but grid columns handle it naturally if markup is correct. 
     However, if we want strict alternation regardless of markup order, we can use order property.
     But I structured HTML to match the visual desire (Image Left for 2nd row). 
     So just grid-template-columns is enough. */
}

.info-text h2 {
  font: var(--step-2) var(--ff-heading);
  color: #8B4513;
  margin-bottom: 1rem;
}

.info-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.info-image img:hover {
  transform: scale(1.02);
}

.info-row:first-child .info-image {
  margin-top: 2rem;
  /* Lower the first image slightly */
}

/* 1. Header / navbar (≤600 px) */
@media(max-width:600px) {
  .header {
    flex-direction: column;
    /* brand on first row, buttons below */
    align-items: flex-start;
    gap: .6rem;
    /* space between the two rows */
    padding: 1rem 1rem;
    /* a touch more side padding */
  }

  .nav {
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start;
    /* left-align buttons */
  }
}

/* 2. Disable sticky sidebar on narrow screens (fix overlap) */
@media(max-width:767px) {
  .sidebar {
    position: static !important;
    /* scrolls away naturally */
    margin-bottom: 1.5rem;
    /* gap before the card grid */
  }
}

/* ───────────────────── 4. TIMELINE (CRONOLOGIE) ───────────────────── */
.timeline-section {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
}

.timeline-header {
  text-align: center;
  margin-bottom: 4rem;
}

.timeline-header h1 {
  font: var(--step-3) var(--ff-heading);
  margin-bottom: 1rem;
  color: #0D1129;
}

.timeline-header p {
  font-size: var(--step-0);
  max-width: 60ch;
  margin-inline: auto;
  color: #555;
}

/* Vertical Line */
.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #0D1129;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
  border-radius: 2px;
  opacity: 0.2;
}

/* Timeline Item Container */
.timeline-item {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  animation: fadeIn 1s both;
}

/* Left/Right positioning */
.timeline-item.left {
  left: 0;
}

.timeline-item.right {
  left: 50%;
}

/* The "Map" Pin/Circle */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  right: -10px;
  background-color: #F5F7FA;
  border: 4px solid #0D1129;
  top: 25px;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.3s ease;
}

.timeline-item.right::after {
  left: -10px;
}

.timeline-item:hover::after {
  background-color: #0D1129;
  transform: scale(1.3);
  box-shadow: 0 0 15px rgba(13, 17, 41, 0.5);
}

/* Content Box */
.timeline-content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 5px solid #0D1129;
}

.timeline-item:hover .timeline-content {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.timeline-item.right .timeline-content {
  border-left: none;
  border-right: 5px solid #0D1129;
}

/* Typography inside card */
.timeline-date {
  font: var(--step-0) var(--ff-base);
  font-weight: 700;
  color: #8B4513;
  /* Bronze/Gold touch */
  margin-bottom: 0.5rem;
  display: block;
}

.timeline-content h2 {
  font: var(--step-1) var(--ff-heading);
  margin-top: 0;
  margin-bottom: 1rem;
  color: #0D1129;
}

.timeline-content p {
  font-size: var(--step--1);
  color: #444;
  line-height: 1.6;
}

.timeline-content>p {
  font-size: var(--step-0);
  line-height: 1.75;
}

.impact-badge {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  background-color: #ffeeba;
  color: #856404;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Media Queries for Timeline */
@media screen and (max-width: 600px) {
  .timeline::after {
    left: 31px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .timeline-item::after {
    left: 21px;
  }

  .timeline-item.left::after,
  .timeline-item.right::after {
    left: 21px;
  }

  .timeline-item.right {
    left: 0%;
  }



  .timeline-item.right .timeline-content {
    border-right: none;
    border-left: 5px solid #0D1129;
  }
}

/* ───────────────────── 5. TRADINGVIEW TICKER ───────────────────── */
.tradingview-ticker-wrapper {
  padding-top: 4.5rem;
  /* Reduced base padding for mobile */
  background-color: var(--clr-bg-900);
  width: 100%;
}

@media(min-width: 768px) {
  .tradingview-ticker-wrapper {
    padding-top: 5rem;
    /* Significantly reduced for desktop */
  }
}

/* ───────────────────── 6. RICH CONTENT PAGES (Capital & Control) ───────────────────── */
.article-section {
  max-width: 900px;
  margin-inline: auto;
  padding: 4rem 1.5rem;
  font-size: 1.15rem;
  line-height: 1.8;
  color: #333;
}

.article-section h2 {
  font: var(--step-2) var(--ff-heading);
  color: #0D1129;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid #8B4513;
  padding-bottom: 0.5rem;
  display: inline-block;
}

.article-section p {
  margin-bottom: 1.5rem;
}

/* Case Study Cards (e.g. Romania vs Cuba, Tulips vs Crypto) */
.case-study-grid {
  display: grid;
  gap: 2rem;
  margin: 3rem 0;
}

@media(min-width: 768px) {
  .case-study-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.case-study-card {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-top: 5px solid #0D1129;
  transition: transform 0.3s ease;
}

.case-study-card:hover {
  transform: translateY(-5px);
}

.case-study-card.alert {
  border-top-color: #d9534f;
  background-color: #fff5f5;
}

.case-study-card.success {
  border-top-color: #28a745;
  background-color: #f0fff4;
}

.case-study-card h3 {
  font: var(--step-1) var(--ff-heading);
  margin-top: 0;
  margin-bottom: 1rem;
}

.highlight-quote {
  border-left: 4px solid #8B4513;
  padding-left: 1.5rem;
  font-style: italic;
  font-size: 1.25rem;
  color: #555;
  margin: 2rem 0;
  background-color: #f9f4f1;
  padding: 1.5rem;
  border-radius: 0 1rem 1rem 0;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-window {
  background: #ffffff;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  border-radius: 15px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-overlay.active .modal-window {
  transform: scale(1);
}

.modal-header {
  background: #0D1129;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.modal-header h2 {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: 1.5rem;
}

.close-modal-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
}

.close-modal-btn:hover {
  color: #ff4757;
}

.modal-body {
  padding: 30px;
  overflow-y: auto;
  color: #333;
  line-height: 1.6;
}

.modal-window.timeline-modal {
  max-width: 1100px;
}

.modal-body.modal-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 1rem;
  padding: 24px;
  max-height: 78vh;
  overflow: hidden;
}

.modal-article {
  overflow-y: auto;
  padding-right: .35rem;
}

.event-assistant {
  border: 1px solid #dbe3f0;
  background: #f7faff;
  border-radius: .95rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.event-assistant-head {
  padding: .85rem .9rem;
  border-bottom: 1px solid #dbe3f0;
  background: #ecf2fc;
}

.event-assistant-head h3 {
  margin: 0;
  color: #0D1129;
  font: var(--step-0) var(--ff-heading);
}

.event-assistant-head p {
  margin: .4rem 0 0;
  font-size: var(--step--1);
  color: #334264;
}

.event-ai-messages {
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  overflow-y: auto;
  min-height: 220px;
  flex: 1;
}

.event-ai-message {
  padding: .62rem .75rem;
  border-radius: .8rem;
  font-size: .92rem;
  line-height: 1.45;
  max-width: 100%;
  word-break: break-word;
}

.event-ai-message.ai {
  align-self: flex-start;
  background: #e3ebfb;
  color: #1e2c4c;
}

.event-ai-message.user {
  align-self: flex-end;
  background: #0D1129;
  color: #ffffff;
}

.event-ai-message.event-ai-loading {
  opacity: .82;
}

.event-ai-input-row {
  border-top: 1px solid #dbe3f0;
  background: #ffffff;
  padding: .75rem;
  display: flex;
  gap: .55rem;
}

.event-ai-input {
  flex: 1;
  padding: .62rem .72rem;
  border: 1px solid #cfd6e4;
  border-radius: .72rem;
  font-size: .9rem;
  color: #11192e;
}

.event-ai-input:focus {
  outline: none;
  border-color: #0D1129;
  box-shadow: 0 0 0 3px rgba(13, 17, 41, 0.12);
}

.event-ai-send {
  border: none;
  border-radius: .72rem;
  background: #0D1129;
  color: #ffffff;
  min-width: 44px;
  padding: 0 .8rem;
  cursor: pointer;
}

.event-ai-send:disabled {
  opacity: .65;
  cursor: wait;
}

.modal-body h3 {
  color: #8B4513;
  margin-top: 1.5rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

.hidden-details {
  display: none;
}

.timeline-item .timeline-content {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-item .timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.mechanism-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.signal-list {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
}

.signal-list li {
  color: #333;
  line-height: 1.6;
}

.signal-list.ordered {
  margin-top: 1.5rem;
  padding-left: 1.4rem;
}

.insight-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0;
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.insight-table thead {
  background: #0D1129;
}

.insight-table th {
  color: #ffffff;
  text-align: left;
  font-weight: 700;
  padding: 0.9rem 1rem;
  font-size: var(--step--1);
}

.insight-table td {
  padding: 0.85rem 1rem;
  border-top: 1px solid #eceff5;
  color: #273047;
}

.auth-section {
  max-width: 1100px;
  margin-inline: auto;
  padding: 1.5rem 1.5rem 5rem;
}

.auth-grid {
  display: grid;
  gap: 1.5rem;
}

.auth-panel {
  background: #f9fbff;
  border: 1px solid #dde3ef;
  border-radius: 1rem;
  padding: 1.5rem;
  color: #202a42;
}

.auth-panel h2 {
  margin: 0;
  font: var(--step-2) var(--ff-heading);
  color: #0D1129;
}

.auth-card {
  background: #ffffff;
  border-radius: 1rem;
  border-top: 5px solid #0D1129;
  padding: 1.5rem;
  box-shadow: 0 10px 24px rgba(13, 17, 41, 0.1);
}

.auth-card h2 {
  margin: 0 0 1.25rem;
  font: var(--step-2) var(--ff-heading);
  color: #0D1129;
}

.auth-card form {
  display: grid;
  gap: 0.8rem;
}

.auth-card label {
  font-size: var(--step--1);
  font-weight: 700;
  color: #273047;
}

.auth-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid #cfd6e4;
  border-radius: 0.75rem;
  font: var(--step--1) var(--ff-base);
  color: #161d2f;
  background: #f8faff;
}

.auth-input:focus {
  outline: none;
  border-color: #0D1129;
  box-shadow: 0 0 0 3px rgba(13, 17, 41, 0.1);
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.4rem;
}

.auth-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.auth-meta a {
  color: #0D1129;
  font-weight: 700;
  text-decoration: none;
}

.auth-meta a:hover {
  text-decoration: underline;
}

.auth-status {
  border-radius: 0.8rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
  font-size: var(--step--1);
  font-weight: 700;
}

.auth-status.error {
  background: #fde8ea;
  border: 1px solid #f6c4cb;
  color: #8f1f2f;
}

.auth-status.success {
  background: #e8f8ec;
  border: 1px solid #bfebcb;
  color: #1f6d35;
}

.auth-inline-status {
  min-height: 1.2rem;
  font-size: var(--step--1);
  font-weight: 700;
}

.auth-inline-status.success {
  color: #1f6d35;
}

.auth-inline-status.error {
  color: #8f1f2f;
}

@media(min-width: 960px) {
  .auth-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .auth-panel,
  .auth-card {
    padding: 2rem;
  }
}

@media(max-width: 720px) {
  .insight-table {
    display: block;
    overflow-x: auto;
  }
}

@media(max-width: 960px) {
  .header {
    position: sticky;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .75rem .9rem .9rem;
  }

  .brand {
    text-align: center;
  }

  .nav-center {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem;
  }

  .nav-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem;
  }

  .nav-center .btn,
  .nav-right .btn {
    font-size: .78rem;
    padding: .52em .86em;
    border-radius: 1.05em;
  }

  .nav-right .btn {
    max-width: 90vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tradingview-ticker-wrapper {
    padding-top: 0;
  }

  .page-banner {
    padding-top: 2.8rem;
  }

  .modal-body.modal-split {
    grid-template-columns: 1fr;
    max-height: 82vh;
    overflow-y: auto;
  }

  .modal-article {
    overflow: visible;
    padding-right: 0;
  }

  .event-assistant {
    min-height: 340px;
  }
}

@media(max-width: 600px) {
  .header {
    gap: .45rem;
    padding: .68rem .55rem .82rem;
  }

  .brand {
    font-size: 1.08rem;
  }

  .nav-center,
  .nav-right {
    gap: .35rem;
  }

  .nav-center .btn,
  .nav-right .btn {
    font-size: .72rem;
    padding: .49em .75em;
  }

  .timeline-section {
    padding: 2.5rem 1rem;
  }

  .page-banner {
    padding: 2.2rem 1rem .8rem;
  }

  .modal-body.modal-split {
    padding: 16px;
  }

  .event-assistant {
    min-height: 300px;
  }

  .event-ai-messages {
    min-height: 200px;
  }
}