/* SoftTech Qazaqstan static pages */
:root{--bg:#0b0f1a;--fg:#e8eefc;--muted:#a9b4d0;--border:rgba(255,255,255,.10);--radius:18px;--shadow:0 18px 40px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1200px 600px at 15% -10%, rgba(85,194,255,.25), transparent 60%),radial-gradient(900px 500px at 90% 0%, rgba(135,86,255,.20), transparent 55%),linear-gradient(180deg,#070a12 0%,#0b0f1a 55%,#070a12 100%);color:var(--fg)}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92vw);margin:0 auto}
.hidden{display:none!important}

/* header */
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(10px);background:rgba(10,14,26,.70);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brand img{width:34px;height:34px;object-fit:contain}
.brand .name{font-weight:700}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--muted);padding:8px 10px;border-radius:10px}
.nav a.active,.nav a:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.langs{display:flex;align-items:center;gap:8px}
.langs button{border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--fg);padding:7px 10px;border-radius:12px;cursor:pointer}
.langs button.active{background:rgba(85,194,255,.18);border-color:rgba(85,194,255,.45)}
.burger{display:none;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--fg);padding:8px 10px;border-radius:12px;cursor:pointer}
.mobile-menu{display:none;padding:10px 0 18px;border-top:1px solid var(--border)}
.mobile-menu a{display:block;padding:12px 0;color:var(--muted)}
.mobile-menu a:hover{color:var(--fg)}

/* hero */
.hero{padding:38px 0 22px}
.hero-card{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:260px}
.hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,18,.15) 0%,rgba(6,10,18,.78) 65%,rgba(6,10,18,.90) 100%),radial-gradient(900px 400px at 30% 20%,rgba(85,194,255,.25),transparent 60%),radial-gradient(700px 320px at 80% 15%,rgba(134,86,255,.20),transparent 55%);background-size:cover;background-position:center;transform:scale(1.05)}
.hero-content{position:relative;padding:42px 36px;display:flex;flex-direction:column;gap:10px}
.hero h1{margin:0;font-size:42px;line-height:1.08}
.hero p{margin:0;color:var(--muted);font-size:18px;max-width:760px}
.hero-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--fg);cursor:pointer}
.btn.primary{background:rgba(85,194,255,.18);border-color:rgba(85,194,255,.45)}
.btn.small{padding:10px 12px;border-radius:12px;font-size:14px}

/* sections */
.section{padding:26px 0}
.section h2{margin:0 0 12px;font-size:28px}
.section .sub{margin:0 0 18px;color:var(--muted)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{perspective:1200px}
.card-inner{position:relative;width:100%;min-height:230px;transform-style:preserve-3d;transition:transform .55s ease}
.card.flip .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:rgba(18,26,44,.60);box-shadow:var(--shadow);backface-visibility:hidden}
.card-front .card-art{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(10px) saturate(115%);transform:scale(1.08)}
.card-front .card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,18,.22) 0%,rgba(6,10,18,.74) 62%,rgba(6,10,18,.90) 100%)}
.card-front .card-front-content{position:relative;padding:18px 18px 16px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.card-title{font-size:20px;margin:0}
.card-back{transform:rotateY(180deg);background:rgba(18,26,44,.85)}
.card-back-content{height:100%;padding:18px;display:flex;flex-direction:column;gap:10px}
.card-desc{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.card-back-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}

/* detail */
.detail{padding:22px 0 34px}
.detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}
.panel{border:1px solid var(--border);border-radius:var(--radius);background:rgba(18,26,44,.55);box-shadow:var(--shadow);overflow:hidden}
.panel-body{padding:18px 18px 6px}
.panel h1{margin:0 0 8px;font-size:34px}
.panel p{margin:0 0 12px;color:var(--muted);line-height:1.6}
.kv{padding:0 18px 18px}
.kv h3{margin:14px 0 6px;font-size:16px}
.kv p{margin:0 0 10px}
.side{padding:18px;display:flex;flex-direction:column;gap:12px}
.side .btn{width:100%}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);font-size:13px}

/* footer */
.footer{border-top:1px solid var(--border);padding:18px 0 28px;color:var(--muted)}
.footer a{color:var(--fg)}

/* responsive */
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}}
@media (max-width:720px){.nav{display:none}.burger{display:inline-flex}.mobile-menu{display:block}.brand{min-width:auto}.hero h1{font-size:32px}.hero-content{padding:34px 20px}.cards{grid-template-columns:1fr}}

/* === CARD BEAUTY UPDATE === */

/* FRONT SIDE CENTERING */
.card-front,
.card .front,
.flip-card-front {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.card-front .card-title,
.card .front .card-title,
.flip-card-front .card-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.15;
}

/* BACK SIDE CENTERING */
.card-back,
.card .back,
.flip-card-back {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
}

.card-back .back-title,
.card .back .back-title,
.flip-card-back .back-title {
  margin: 0 0 10px 0;
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.15;
}

.card-back .back-text,
.card .back .back-text,
.flip-card-back .back-text {
  margin: 0;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.35;
}

/* LOGO WATERMARK */
.card-back::after,
.card .back::after,
.flip-card-back::after {
  content: "";
  position: absolute;
  width: min(62%, 220px);
  height: min(62%, 220px);
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: url("/assets/img/logo.png") no-repeat center / contain;
  opacity: 0.12;
  pointer-events: none;
}

/* ENSURE TEXT ABOVE LOGO */
.card-back > * ,
.card .back > *,
.flip-card-back > * {
  position: relative;
  z-index: 1;
}

/* === CARD FIXES v2 === */
:root{
  --card-h: 230px;
}

/* keep card size stable while flipping/clicking */
.card{ height: var(--card-h); }
.card-inner{ height: var(--card-h); min-height: 0 !important; }
.card-face{ width: 100%; height: 100%; }

/* FRONT: true vertical centering (override existing justify-content:flex-end) */
.card-front .card-front-content{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  padding:18px !important;
}

/* BACK: logo on the left, content shifted right */
.card-back{
  position: relative;
}
.card-back::after{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:96px;
  height:96px;
  background: url("/assets/img/logo.png") no-repeat center / contain;
  opacity:0.18;
  pointer-events:none;
}
.card-back .card-back-content{
  padding-left: 132px !important; /* 16 + 96 + gap */
  padding-right: 18px !important;
}

/* ensure all back content stays above the logo */
.card-back .card-back-content,
.card-back .card-back-content *{
  position: relative;
  z-index: 1;
}

/* === Detail side illustration === */
.panel.side .side-illustration-wrap{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  min-height: 180px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  margin-bottom: 14px;
}
.panel.side img.side-illustration{
  display:block;
  width:100%;
  height:100%;
  max-height: 220px;
  object-fit: cover;
}


/* === Detail side panel polish (v9) === */
.panel.side .side-illustration-wrap{
  position: relative;
  transform: translateY(6px);
  opacity: 0;
  transition: opacity 240ms ease, transform 240ms ease;
}

/* reveal on load */
.panel.side .side-illustration-wrap.is-loaded,
.panel.side .side-illustration-wrap:not(.is-loading){
  opacity: 1;
  transform: translateY(0);
}

/* subtle gradient overlay */
.panel.side .side-illustration-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.40));
  pointer-events:none;
  z-index: 2;
}

/* image transitions */
.panel.side img.side-illustration{
  transition: transform 260ms ease, opacity 240ms ease;
  will-change: transform;
}

/* hover micro-parallax */
.panel.side .side-illustration-wrap:hover img.side-illustration{
  transform: scale(1.03) translateY(-2px);
}

/* loading state (skeleton shimmer) */
.panel.side .side-illustration-wrap.is-loading{
  opacity: 1;
  transform: none;
  overflow:hidden;
}

.panel.side .side-illustration-wrap.is-loading::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  transform: rotate(12deg);
  animation: stShimmer 1.2s linear infinite;
  z-index: 3;
  pointer-events:none;
}

@keyframes stShimmer{
  0%{ transform: translateX(-30%) rotate(12deg); }
  100%{ transform: translateX(30%) rotate(12deg); }
}


/* === Catalog cards polish (v10) === */

/* consistent card sizing across languages */
:root{
  --catalog-card-minh: 230px;
}

.cards-grid .card,
.grid.cards .card,
.cards .card{
  min-height: var(--catalog-card-minh);
}

/* smoother hover: lift + border glow (subtle) */
.cards-grid .card,
.grid.cards .card,
.cards .card{
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
  will-change: transform;
}

.cards-grid .card:hover,
.grid.cards .card:hover,
.cards .card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  border-color: rgba(140, 210, 255, 0.28);
}

/* focus state for keyboard */
.cards-grid .card:focus-within,
.grid.cards .card:focus-within,
.cards .card:focus-within{
  border-color: rgba(140, 210, 255, 0.35);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

/* Improve title contrast on blurred/image fronts */
.card-front .card-title,
.card .front .card-title,
.flip-card-front .card-title{
  text-shadow: 0 6px 18px rgba(0,0,0,0.55);
}

/* Front content overlay to unify readability (doesn't affect background image) */
.card-front,
.card .front,
.flip-card-front{
  position: relative;
}

.card-front::before,
.card .front::before,
.flip-card-front::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 120% at 50% 60%, rgba(0,0,0,0.10), rgba(0,0,0,0.40));
  pointer-events:none;
  z-index: 0;
}

.card-front > *,
.card .front > *,
.flip-card-front > *{
  position: relative;
  z-index: 1;
}

/* Ensure long titles wrap nicely and stay centered */
.card-front .card-title,
.card .front .card-title,
.flip-card-front .card-title{
  max-width: 90%;
  overflow-wrap: anywhere;
}

/* Flip shouldn't shrink card (reinforce in catalog too) */
.card,
.flip-card{
  transform-style: preserve-3d;
}

.card-inner,
.flip-card-inner{
  width: 100%;
  height: 100%;
}


/* === v10 fixes: contrast + flip stability + smooth bg === */

/* 1) Hero subtitle + buttons contrast */
.hero p{
  color: rgba(232,238,252,.78);
  text-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.hero-actions .btn{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.hero-actions .btn.primary{
  background: rgba(85,194,255,.22);
  border-color: rgba(85,194,255,.55);
}

/* 2) Fix flip disappearing: don't transform the 3D parent on hover */
.cards-grid .card:hover,
.grid.cards .card:hover,
.cards .card:hover{
  transform: none !important;
}
/* keep a "lift" feel via shadow + slight art zoom */
.cards-grid .card:hover .card-front .card-art,
.grid.cards .card:hover .card-front .card-art,
.cards .card:hover .card-front .card-art{
  transform: scale(1.12);
}
/* keep hover shadow/border effect */
.cards-grid .card:hover,
.grid.cards .card:hover,
.cards .card:hover{
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  border-color: rgba(140, 210, 255, 0.28);
}

/* 3) Smoother background transitions across site */
body{
  background: linear-gradient(180deg,#070a12 0%, #0b0f1a 45%, #0a1021 70%, #070a12 100%);
}
body::before{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 45% at 15% 20%, rgba(85,194,255,.10), rgba(0,0,0,0) 60%),
    radial-gradient(55% 50% at 85% 25%, rgba(130,120,255,.12), rgba(0,0,0,0) 60%),
    radial-gradient(60% 55% at 70% 80%, rgba(85,194,255,.07), rgba(0,0,0,0) 62%),
    radial-gradient(70% 60% at 20% 85%, rgba(130,120,255,.08), rgba(0,0,0,0) 65%);
  filter: blur(28px);
  opacity: .95;
}

/* Reduce harsh banding in section backgrounds if any */
.hero-bg{filter: saturate(110%) contrast(102%);}


/* === v10 fix2: stabilize flip layout (no vertical shift / no overflow) === */
:root{
  --catalog-card-h: 230px;
}

/* Ensure the card has a stable box size (absolute faces need a real height) */
.card{
  position: relative;
  height: var(--catalog-card-h);
  min-height: var(--catalog-card-h);
}

/* Inner takes the full height so faces stay aligned */
.card-inner{
  height: 100%;
  min-height: 100%;
}

/* Clip content to rounded corners on both faces */
.card-face{
  overflow: hidden;
  border-radius: var(--radius);
}

/* Back content should never spill outside */
.card-back-content{
  overflow: hidden;
}

/* === v10 fix3: flip click + zindex === */
.card.flip{z-index: 3;}


/* === v10 fix4: prevent flipped card overlaying neighbors === */
/* Do NOT raise stacking order on flip; keep each card confined to its grid cell */
.card{position:relative; z-index:auto; isolation:isolate;}
.card.flip{z-index:auto;}


/* === v10 fix5: lock grid tracks + flip origin (prevents "sliding down") === */
:root{ --catalog-card-h: 230px; }

.cards{
  align-items: stretch;
  grid-auto-rows: var(--catalog-card-h);
}

/* make the grid item itself stable */
.card{
  height: var(--catalog-card-h);
  min-height: var(--catalog-card-h);
  width: 100%;
}

/* inner must be exactly the same size, no intrinsic sizing */
.card-inner{
  width: 100%;
  height: 100%;
  min-height: 0;
  transform-origin: 50% 50%;
}
.card-face{
  transform-origin: 50% 50%;
}


/* === v10 fix7: lock grid layout during 3D flip (no reflow / no jump) === */
.cards{grid-auto-rows: 230px; align-items: stretch;}
.card{
  height: 230px;
  min-height: 230px;
  display:block;
  contain: layout paint;
}
.card-inner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
}


/* === v10 fix8: restore back face rendering === */
/* Some browsers hate 3D + contain. Keep layout stable without contain. */
.card{contain: unset !important;}
/* Re-assert 3D stack and full-bleed faces */
.card-inner{position:absolute; inset:0; width:100%; height:100%; min-height:0; transform-style:preserve-3d;}
.card-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.card-back{transform:rotateY(180deg);}


/* === v10 fix9: make back-side buttons clickable === */
/* Only the visible face should receive pointer events */
.card-face{pointer-events:none;}
.card:not(.flip) .card-front{pointer-events:auto;}
.card.flip .card-back{pointer-events:auto;}

/* Keep stacking deterministic */
.card-front{z-index:2;}
.card-back{z-index:1;}
.card.flip .card-front{z-index:1;}
.card.flip .card-back{z-index:2;}


/* === v11: Buttons polish (Primary/Secondary + consistency) === */
:root{
  --btn-h: 46px;
  --btn-radius: 14px;
  --btn-pad-x: 18px;
  --btn-focus: rgba(140,210,255,0.45);
}

/* Baseline button system */
.btn,
a.btn,
button.btn{
  min-height: var(--btn-h);
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 140ms ease, filter 180ms ease;
}

/* Keyboard focus */
.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(140,210,255,0.18), 0 10px 26px rgba(0,0,0,0.28);
  border-color: var(--btn-focus);
}

/* Active */
.btn:active,
a.btn:active,
button.btn:active{
  transform: translateY(1px);
  filter: brightness(0.98);
}

/* Disabled (if used) */
.btn[aria-disabled="true"],
.btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary button */
.btn.primary{
  background: rgba(85,194,255,.22);
  border-color: rgba(85,194,255,.55);
}

/* Primary hover: subtle glow (no neon) */
.btn.primary:hover{
  background: rgba(85,194,255,.26);
  border-color: rgba(85,194,255,.62);
  box-shadow: 0 0 0 1px rgba(85,194,255,.16), 0 14px 32px rgba(0,0,0,.34);
}

/* Secondary button (default .btn) hover via background, not border */
.btn:not(.primary):hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12); /* keep stable */
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* Make small buttons consistent too */
.btn.small{
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
}

/* Full-width buttons in side panels keep same height */
.side .btn{ width: 100%; }


/* === v12: Typography scale + readability === */

/* Unified heading scale */
:root{
  --h1: clamp(34px, 3.2vw, 44px);
  --h2: clamp(24px, 2.3vw, 30px);
  --h3: clamp(16px, 1.6vw, 18px);
  --text: 16px;
  --lh-body: 1.65;
  --lh-tight: 1.2;
}

/* Base text rhythm */
body{
  font-size: var(--text);
  line-height: var(--lh-body);
}

/* Headings */
.hero h1{ font-size: var(--h1); line-height: var(--lh-tight); }
.panel h1{ font-size: var(--h1); line-height: var(--lh-tight); }

.section h2{ font-size: var(--h2); line-height: 1.25; }
.kv h3{ font-size: var(--h3); line-height: 1.25; }

/* 1) Increase line-height in “О чём / Для кого” blocks */
#aboutText, #audienceText, #recoText,
.kv p{
  line-height: 1.75;
}

/* 2) Better wrapping for long words (KZ/BY, URLs, compound words) */
#detailTitle, #detailTagline,
.card-title, .card-desc,
.kv p, .panel p, .hero p{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Keep buttons text neat */
.btn{
  white-space: nowrap;
}
.btn.small, .card-back-actions .btn{
  white-space: normal;
  text-align: center;
}


/* === v13: Loading skeletons (no empty blocks) === */

:root{
  --sk-bg: rgba(255,255,255,.05);
  --sk-hi: rgba(255,255,255,.10);
}

/* Shared skeleton shimmer */
.skeleton{
  position: relative;
  background: var(--sk-bg);
  overflow: hidden;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.00), var(--sk-hi), rgba(255,255,255,0.00));
  transform: rotate(10deg);
  animation: stSkShimmer 1.15s linear infinite;
  pointer-events:none;
}
@keyframes stSkShimmer{
  0%{ transform: translateX(-30%) rotate(10deg); }
  100%{ transform: translateX(30%) rotate(10deg); }
}

/* Card art skeleton until bg image is ready */
.card-front .card-art{
  background-color: rgba(255,255,255,.04);
}
.card-front .card-art.is-loading{
  background-image: none !important;
}
.card-front .card-art.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.08), rgba(255,255,255,0.00));
  animation: stSkShimmer 1.15s linear infinite;
}

/* Detail side image skeleton (wrap already exists) */
.panel.side .side-illustration-wrap.is-loading{
  background: rgba(255,255,255,.05);
}
.panel.side .side-illustration-wrap.is-loading::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.08), rgba(255,255,255,0.00));
  transform: rotate(12deg);
  animation: stSkShimmer 1.15s linear infinite;
  z-index: 3;
}

/* Hero bg skeleton if image is set asynchronously */
.hero-bg.is-loading{
  background-image: none !important;
  background-color: rgba(255,255,255,.04);
}
.hero-bg.is-loading::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.08), rgba(255,255,255,0.00));
  transform: rotate(10deg);
  animation: stSkShimmer 1.15s linear infinite;
}


/* === v14: Smooth transitions on language switch === */
:root{
  --lang-fade: 200ms;
}

/* When switching language, gently fade key content blocks */
body.lang-switching .hero-card,
body.lang-switching .section,
body.lang-switching .detail-grid,
body.lang-switching .cards{
  opacity: 0.65;
  transform: translateY(2px);
  transition: opacity var(--lang-fade) ease, transform var(--lang-fade) ease;
}

.hero-card,
.section,
.detail-grid,
.cards{
  transition: opacity var(--lang-fade) ease, transform var(--lang-fade) ease;
}


/* === 5.x Content pages + footer layout === */
.prose{max-width:860px}
.prose p{margin:0 0 12px 0;line-height:1.6}
.prose h2{margin:22px 0 10px 0;font-size:clamp(18px,2vw,22px)}
.prose .note{margin-top:18px;color:var(--muted)}

.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px;margin-top:8px}
.footer-title{font-weight:700;color:var(--fg);margin-bottom:8px}
.footer-desc{line-height:1.6}
.footer-col a{display:block;margin:6px 0;text-decoration:none}
.footer-bottom{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:14px}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.contact-card{border:1px solid var(--border);border-radius:16px;padding:16px;background:rgba(255,255,255,0.02)}
.contact-card h3{margin:0 0 8px 0}
.contact-card p{margin:0 0 10px 0}

@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:14px}
}
@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}