/* countries-theme.css
   Visual + motion system for /countries pages (zh/en/de).
   Goals: light flag-color themes, section differentiation, smoother interactions.
*/

.country-theme{
  --country-primary:#1f6feb;
  --country-secondary:#ef4444;
  --country-accent:#f59e0b;
  --country-tint-a:rgba(31,111,235,.20);
  --country-tint-b:rgba(239,68,68,.18);
  --country-tint-c:rgba(245,158,11,.18);
}

.country-theme.country-hub{
  --country-primary:#0f6ea9;
  --country-secondary:#16a34a;
  --country-accent:#eab308;
  --country-tint-a:rgba(15,110,169,.20);
  --country-tint-b:rgba(22,163,74,.16);
  --country-tint-c:rgba(234,179,8,.16);
}

.country-theme.country-france{
  --country-secondary:#ef4135;
  --country-accent:#dbeafe;
  --country-tint-a:rgba(0,85,164,.20);
  --country-tint-b:rgba(239,65,53,.18);
  --country-tint-c:rgba(219,234,254,.56);
}

.country-theme.country-netherlands{
  --country-secondary:#ae1c28;
  --country-accent:#dbeafe;
  --country-tint-a:rgba(33,70,139,.20);
  --country-tint-b:rgba(174,28,40,.17);
  --country-tint-c:rgba(219,234,254,.56);
}

.country-theme.country-spain{
  --country-secondary:#f1bf00;
  --country-accent:#ffe7ab;
  --country-tint-a:rgba(170,21,27,.20);
  --country-tint-b:rgba(241,191,0,.20);
  --country-tint-c:rgba(255,231,171,.62);
}

.country-theme.country-austria{
  --country-secondary:#ffffff;
  --country-accent:#ffe4ea;
  --country-tint-a:rgba(237,41,57,.20);
  --country-tint-b:rgba(255,255,255,.64);
  --country-tint-c:rgba(255,228,234,.66);
}

.country-theme.country-central-asia{
  --country-primary:#1297d3;
  --country-secondary:#0ea5a4;
  --country-accent:#fcd34d;
  --country-tint-a:rgba(18,151,211,.20);
  --country-tint-b:rgba(14,165,164,.18);
  --country-tint-c:rgba(252,211,77,.20);
}

.country-theme .page-main{
  background:
    radial-gradient(900px 360px at 8% -8%, var(--country-tint-a), rgba(255,255,255,0) 64%),
    radial-gradient(780px 340px at 96% 2%, var(--country-tint-b), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f8fbff, #f7fbff 45%, #f9fcff 100%);
}

.country-theme .hero{
  position:relative;
  overflow:hidden;
  border-color:rgba(15,23,42,.11);
  border-radius:24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(244,249,255,.95));
}

.country-theme .hero::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-72px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--country-tint-a), rgba(255,255,255,0) 72%);
  pointer-events:none;
}

.country-theme .hero-art{
  border:1px solid rgba(15,23,42,.10);
  border-radius:20px !important;
  box-shadow:0 14px 28px rgba(15,23,42,.08);
  background:
    linear-gradient(135deg, var(--country-tint-a), var(--country-tint-b), rgba(255,255,255,.44)) !important;
  color:rgba(15,23,42,.9) !important;
}

.country-theme .btn.primary{
  border-color:transparent;
  box-shadow:0 9px 18px rgba(15,23,42,.12);
}

.country-theme .btn.primary:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}

.country-theme .section{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  border-radius:24px;
  margin-top:calc(var(--space-section) + 8px);
  padding:clamp(14px,2.2vw,24px);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.95));
}

.country-theme .section::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--country-primary), var(--country-secondary), var(--country-accent));
  opacity:.34;
  pointer-events:none;
}

.country-theme .section h2{
  margin-top:4px;
}

.country-theme #services{
  background:
    radial-gradient(760px 300px at 100% 0%, var(--country-tint-a), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,255,.95));
}

.country-theme #services .card{
  border-color:rgba(15,23,42,.10);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,248,255,.94));
  box-shadow:0 8px 22px rgba(15,23,42,.07);
}

.country-theme #deliver{
  background:
    radial-gradient(780px 320px at 2% 100%, var(--country-tint-b), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,255,.95));
}

.country-theme #deliver .card{
  border:1px dashed rgba(15,23,42,.16);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.96));
}

.country-theme #process{
  background:
    radial-gradient(860px 310px at 98% 100%, var(--country-tint-c), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,252,255,.95));
}

.country-theme #process .card,
.country-theme #process ol{
  border-color:rgba(15,23,42,.11);
}

.country-theme #materials{
  background:
    radial-gradient(820px 280px at 2% 0%, var(--country-tint-a), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,251,253,.95));
}

.country-theme #materials .card{
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,252,253,.95));
}

.country-theme.country-central-asia #kg{
  background:
    radial-gradient(780px 300px at 100% 0%, rgba(18,151,211,.16), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,250,255,.95));
}

.country-theme.country-central-asia #kz{
  background:
    radial-gradient(760px 300px at 0% 100%, rgba(14,165,164,.15), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,253,250,.95));
}

.country-theme.country-central-asia #uz{
  background:
    radial-gradient(780px 300px at 100% 100%, rgba(252,211,77,.18), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,252,243,.95));
}

.country-theme.country-central-asia #chain{
  background:
    radial-gradient(760px 280px at 0% 0%, rgba(18,151,211,.15), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.95));
}

.country-theme .sy-faq{
  border:1px solid rgba(15,23,42,.10);
  border-radius:24px;
  background:
    radial-gradient(780px 280px at 100% 0%, var(--country-tint-b), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.96));
  box-shadow:var(--shadow-sm);
}

.country-theme .sy-faq .sy-qa{
  border-color:rgba(15,23,42,.10);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.95));
}

.country-theme .section.cta{
  background:
    radial-gradient(760px 260px at 10% 0%, var(--country-tint-c), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.95));
}

.country-theme .cta-card{
  border-color:rgba(15,23,42,.10);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,255,.95));
}

.country-theme.country-hub .country-grid{
  gap:16px;
}

.country-theme.country-hub .country-card{
  border:1px solid rgba(15,23,42,.11);
  border-radius:24px;
  background:
    radial-gradient(760px 300px at 100% -12%, var(--country-tint-a), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,250,255,.95));
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.country-theme.country-hub .country-card:hover{
  transform:translateY(-4px);
  border-color:rgba(15,23,42,.22);
  box-shadow:0 14px 28px rgba(15,23,42,.11);
}

.country-theme.country-hub .country-card .small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
}

.country-theme.country-motion .country-anim-item{
  opacity:0;
  transform:translate3d(0, 14px, 0);
  transition:
    opacity .62s cubic-bezier(.22,.61,.36,1) var(--delay, 0ms),
    transform .62s cubic-bezier(.22,.61,.36,1) var(--delay, 0ms);
  will-change:opacity, transform;
}

.country-theme.country-motion .country-anim-item.is-visible{
  opacity:1;
  transform:translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce){
  .country-theme.country-motion .country-anim-item{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media (max-width: 900px){
  .country-theme .hero-art{
    min-height:200px !important;
    height:200px !important;
  }
}