
/* ============================================================
   TEVAND web3-infrastructure — structural redesign (light + crimson),
   matching the index.htm direction. Differentiate by structure, not hue.
   ============================================================ */
h1,h2,h3,h4,.content h1,.content h2,.content h3,.content h4{
  font-family:'Space Grotesk','Inter',sans-serif !important; letter-spacing:-.022em;
}
body{ font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }

/* Название сайта в шапке и подвале. Не Inter 800: у Inter ExtraBold тонкая стойка и толстая
   диагональ, заглавная N на 30px выглядит смазанной. Space Grotesk 700 уже загружен для
   заголовков, штрихи ровные. Интервал обычный, tracking-tight слеплял буквы. */
.tv-brand{ font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; letter-spacing:-.01em; line-height:1; }

/* section headings: bigger + gradient accent span */
.page-section .content > h2{
  font-size:clamp(2rem,3.6vw,3.3rem) !important; line-height:1.07 !important; letter-spacing:-.03em; font-weight:700; /* Space Grotesk ships 300–700 only; 800 was browser-synthesised (smeared strokes) */
}
.page-section .content > h2 .tv-accent{
  background:linear-gradient(100deg,#e11d48,#fb7185); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* generic cards → white, layered shadow, hover lift */
.page-section .bg-blue-50.rounded-2xl,
.page-section .bg-white.rounded-2xl,
.page-section .bg-white.rounded-3xl{
  background:linear-gradient(180deg,#ffffff 0%,#f3f6ff 100%) !important;
  border:1px solid #e6eaf5 !important; border-radius:1.5rem !important;
  box-shadow:0 22px 52px -30px rgba(23,37,84,.4) !important;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.page-section .bg-blue-50.rounded-2xl:hover,
.page-section .bg-white.rounded-2xl:hover{
  transform:translateY(-5px); border-color:#cfd8ec !important;
  box-shadow:0 36px 68px -30px rgba(23,37,84,.45) !important;
}
.bg-blue-100{ background-color:#eef3ff !important; }
/* flat bright-blue accent/CTA panels → dark crimson-tinted (white text, crimson buttons pop) */
.bg-blue-500,.bg-blue-600,.bg-blue-700{ background:linear-gradient(135deg,#1b1b2c 0%,#3a1426 100%) !important; }
.bg-blue-500 + .bg-blue-500,.bg-blue-500 ~ .bg-blue-500{ background:linear-gradient(135deg,#241024 0%,#4a1530 100%) !important; }

/* heading text tones */
.text-coal-500,.text-coal-base,.text-brand-black,.text-gray-950{ color:#0f172a !important; }

/* ===== Use cases (4-col) → cards ===== */
.tv-usecases > div{
  background:linear-gradient(180deg,#fff,#f3f6ff); border:1px solid #e6eaf5; border-radius:1.4rem;
  padding:2.2rem 1.4rem !important; box-shadow:0 20px 46px -30px rgba(23,37,84,.4);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tv-usecases > div:hover{ transform:translateY(-6px); border-color:#f6c6d0; box-shadow:0 32px 60px -30px rgba(220,38,38,.32); }
.tv-usecases h3{ font-family:'Space Grotesk',sans-serif; color:#0f172a !important; }

/* ===== FAQ accordion ===== */
.border-gray-200{ border-color:#e6eaf5 !important; }

/* ===== Data Centers map → generated crimson-hub world map ===== */
.tv-map > *{ display:none !important; }
.tv-map{ position:relative; width:100%; border-radius:1.5rem; overflow:hidden;
  box-shadow:0 34px 80px -38px rgba(23,37,84,.5); border:1px solid #e6eaf5; }
.tv-map::before{ content:""; display:block; width:100%; aspect-ratio:1142/678;
  background:url("/v3/assets/site/maps/world-map.jpg") center/cover no-repeat; }

/* list checkmarks → crimson */
.list-icon--checkmark-green>li:before{
  content:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:100%25;height:100%25;' viewBox='0 0 24 24' fill='none' stroke='%23e11d48' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* ===== Footer dark (sharp contrast vs the light page) ===== */
footer [class*="356491"]{ background:linear-gradient(140deg,#3a1222 0%,#160a12 100%) !important; border:1px solid rgba(225,29,72,.28); }
footer [class*="356491"] .form-input{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.18) !important; color:#fff !important; }

/* =====================================================================
   Feature blocks (centered icon-on-top columns) → HORIZONTAL cards
   icon in left chip, text right, left-aligned. Applies to "How Tevand
   helps…" and the "vs Hyperscalers" feature row.
   ===================================================================== */
.tv-feat{ margin:0 !important; gap:0; align-items:stretch; }
.tv-feat > div{
  flex-direction:row !important; align-items:flex-start !important; text-align:left !important;
  background:#fff; border:1px solid #e6eaf5; border-radius:1.4rem;
  box-shadow:0 18px 46px -32px rgba(23,37,84,.4);
  padding:1.9rem !important; gap:1.3rem !important;
  width:calc(33.333% - 1.5rem) !important; margin:.75rem !important;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tv-feat > div:hover{ transform:translateY(-6px); border-color:#f6c6d0; box-shadow:0 30px 58px -30px rgba(220,38,38,.32); }
.tv-feat .shrink-0{
  display:inline-flex; align-items:center; justify-content:center; margin:0 !important;
  width:4.2rem; height:4.2rem; border-radius:1.1rem; flex-shrink:0;
  background:linear-gradient(135deg,#fff0f2,#ffe2e8); border:1px solid #fbd0d8;
}
.tv-feat .shrink-0 img{ height:2.6rem !important; width:auto !important; }
.tv-feat .flex-1{ text-align:left !important; }
.tv-feat h3{ text-align:left !important; font-family:'Space Grotesk',sans-serif; color:#0f172a !important; margin-bottom:.4rem; }
@media (max-width:1279px){ .tv-feat > div{ width:calc(50% - 1.5rem) !important; } }
@media (max-width:639px){ .tv-feat > div{ width:100% !important; flex-direction:column !important; align-items:center !important; text-align:center !important; } }
@media (max-width:639px){ .tv-feat h3, .tv-feat .flex-1{ text-align:center !important; } }

/* ===== "Why Web3 teams" feature blocks → cards w/ framed illustration ===== */
.tv-why .grid{ gap:1.4rem !important; grid-template-columns:repeat(2,1fr) !important; }
@media (min-width:1024px){ .tv-why .grid{ grid-template-columns:repeat(4,1fr) !important; } }
.tv-why .grid > div{
  background:#fff; border:1px solid #e6eaf5; border-radius:1.5rem;
  padding:1.7rem !important; box-shadow:0 20px 50px -32px rgba(23,37,84,.42);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tv-why .grid > div:hover{ transform:translateY(-6px); border-color:#f6c6d0; box-shadow:0 32px 60px -30px rgba(220,38,38,.32); }
.tv-why figure img{ border-radius:1rem; margin-bottom:1.2rem !important; border:1px solid #eef1f8; width:100%; }
.tv-why h3{ font-family:'Space Grotesk',sans-serif; color:#0f172a !important; margin-bottom:.5rem !important; }
/* full-width stacked layout: heading on top (centered), cards span the whole row */
.tv-why-row{ display:block !important; }
.tv-why-row > div{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
.tv-why-row > div:first-child{ text-align:center !important; margin-bottom:2.75rem; }
.tv-why-row > div:first-child .inline-flex{ justify-content:center; }
