/* ===== Common Styles ===== */
html.i18n-pending body{visibility:hidden}
body{font-family:var(--font-family);color:var(--color-text);background:var(--color-white)}
html[lang^="en"] body{font-family:var(--font-en)}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px;width:100%}

/* Typography */
.section-title{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;text-align:center;margin-bottom:0.5em;color:var(--color-navy)}
.section-title[data-en-title]::after,.page-hero h1[data-en-title]::after{content:attr(data-en-title);display:block;margin-top:.38em;color:#94a3b8;font-family:var(--font-en);font-size:.33em;font-weight:750;letter-spacing:.17em;line-height:1.3}
:root[lang^="en"] .section-title[data-en-title]::after,:root[lang^="en"] .page-hero h1[data-en-title]::after{display:none}
.section-subtitle{font-size:clamp(0.9rem,1.2vw,1.1rem);text-align:center;color:var(--color-muted);margin-bottom:3rem;max-width:700px;margin-left:auto;margin-right:auto}
.section{padding:clamp(3rem,6vw,5rem) 0}

/* ===== Unified Button System ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-height);padding:var(--btn-padding);border-radius:var(--btn-radius);font-size:15px;font-weight:600;transition:all var(--transition);white-space:nowrap;border:1px solid transparent;cursor:pointer;line-height:1}
.btn svg{width:16px;height:16px;flex-shrink:0;transition:transform var(--transition)}

/* Primary button */
.btn-primary{background:var(--color-orange);color:var(--color-white);border-color:var(--color-orange);box-shadow:0 8px 20px rgba(245,130,32,0.18)}
.btn-primary:hover{background:var(--color-orange-hover);border-color:var(--color-orange-hover);transform:translateY(-1px);box-shadow:0 10px 24px rgba(245,130,32,0.25)}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(245,130,32,0.15)}

/* Secondary button (light background, navy text) */
.btn-secondary{background:transparent;color:var(--color-navy);border-color:var(--color-border)}
.btn-secondary:hover{background:var(--color-orange-light);border-color:var(--color-orange);color:var(--color-orange)}

/* Outline on light bg (matches btn-secondary pattern) */
.btn-outline-dark{border-color:var(--color-border);color:var(--color-navy);background:transparent}
.btn-outline-dark:hover{background:var(--color-orange-light);border-color:var(--color-orange);color:var(--color-orange)}

/* Outline on dark bg (white text, white border) */
.btn-outline-light{background:transparent;color:var(--color-white);border-color:rgba(255,255,255,0.5)}
.btn-outline-light:hover{background:var(--color-white);color:var(--color-navy);border-color:var(--color-white)}

/* Text link button (no full border) */
.btn-link{display:inline-flex;align-items:center;gap:6px;color:var(--color-orange);font-size:0.9rem;font-weight:600;height:auto;padding:0;border:none;background:none}
.btn-link svg{width:16px;height:16px}
.btn-link:hover svg{transform:translateX(3px)}

/* Keep old btn-outline as alias for dark bg */
.btn-outline{background:transparent;color:var(--color-white);border-color:rgba(255,255,255,0.5)}
.btn-outline:hover{background:var(--color-white);color:var(--color-navy);border-color:var(--color-white)}

/* Responsive buttons */
@media(max-width:480px){.btn{height:46px;font-size:14px;padding:0 24px}}

/* Page Hero Inner */
.page-hero{background:var(--color-navy);color:var(--color-white);padding:clamp(3rem,5vw,5rem) 0;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:url(../images/temporary/hero-bg.jpg) center/cover no-repeat;opacity:0.15}
.page-hero h1{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;position:relative}
.page-hero p{font-size:clamp(0.95rem,1.3vw,1.15rem);margin-top:1rem;color:rgba(255,255,255,0.8);position:relative}
.breadcrumb{display:flex;justify-content:center;gap:8px;margin-top:1rem;font-size:0.9rem;color:rgba(255,255,255,0.6);position:relative}
.breadcrumb a{color:rgba(255,255,255,0.8)}
.breadcrumb a:hover{color:var(--color-orange)}
.breadcrumb .sep{color:rgba(255,255,255,0.4)}

/* Cards */
.card{background:var(--color-white);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);transition:transform var(--transition),box-shadow var(--transition)}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(7,27,56,0.1)}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2rem)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2vw,1.75rem)}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.5rem)}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2vw,1.5rem)}

/* Tags */
.tag{display:inline-block;padding:4px 14px;border-radius:20px;font-size:0.8rem;font-weight:500}
.tag-orange{background:var(--color-orange-light);color:var(--color-orange)}
.tag-navy{background:rgba(7,27,56,0.08);color:var(--color-navy)}

/* Animation */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none}}

/* Skeleton loader */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:380px;border-radius:var(--radius-md)}
.skeleton-text{height:1em;margin-bottom:0.5em;width:80%}
.skeleton-text.short{width:50%}

/* Empty & Error States */
.empty-state,.error-state{text-align:center;padding:4rem 2rem;color:var(--color-muted)}
.empty-state svg,.error-state svg{width:64px;height:64px;margin:0 auto 1.5rem;display:block;color:var(--color-border)}
.empty-state h3,.error-state h3{font-size:1.25rem;margin-bottom:0.5rem;color:var(--color-text)}
.error-state .btn{margin-top:1rem}

/* Responsive adjustments */
@media(max-width:1024px){.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr}}

/* Why Grid & Why Item Card Styles */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.why-item {
  padding: 28px 24px;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(7, 27, 56, 0.04);
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.why-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(7, 27, 56, 0.08);
}
.why-item svg {
  width: 36px !important;
  height: 36px !important;
  stroke: var(--color-orange, #f58220) !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.why-item h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
.why-item p {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr; gap: 16px; }
}