/* ===========================
   Ayrik Limited — Global Styles
   =========================== */

/* Base */
body { font-family: 'Inter', system-ui, sans-serif; }

/* Gradients & Backgrounds */
.gradient-hero { background: linear-gradient(165deg, #0a1628 0%, #0f2040 30%, #162f5c 60%, #1e3f7a 100%); }
.hero-image-bg { background-image: linear-gradient(rgba(10, 22, 40, 0.45), rgba(10, 22, 40, 0.45)), url('hero-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.logistics-image-bg { background-image: linear-gradient(rgba(10, 22, 40, 0.45), rgba(10, 22, 40, 0.45)), url('logistics-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.grid-overlay { background-image: linear-gradient(rgba(59,130,246,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,0.03) 1px,transparent 1px); background-size: 60px 60px; }
.circuit-pattern { background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 60h40M70 60h40M60 10v40M60 70v40' stroke='%233b82f6' stroke-width='0.5' fill='none' opacity='0.06'/%3E%3Ccircle cx='60' cy='60' r='3' fill='none' stroke='%233b82f6' stroke-width='0.5' opacity='0.06'/%3E%3Ccircle cx='10' cy='60' r='2' fill='%233b82f6' opacity='0.04'/%3E%3Ccircle cx='110' cy='60' r='2' fill='%233b82f6' opacity='0.04'/%3E%3Ccircle cx='60' cy='10' r='2' fill='%233b82f6' opacity='0.04'/%3E%3Ccircle cx='60' cy='110' r='2' fill='%233b82f6' opacity='0.04'/%3E%3C/svg%3E"); }

/* Cards */
.glass-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); }
.glass-card-light { background: rgba(255,255,255,0.75); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 4px 40px rgba(10,22,40,0.06), 0 1px 3px rgba(10,22,40,0.04); }

/* Effects */
.glow-line { background: linear-gradient(90deg, transparent, #3b82f6, transparent); height: 1px; }
.stat-glow { text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 40px rgba(59,130,246,0.5); }
.pill { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04)); border: 1px solid rgba(59,130,246,0.15); }

/* Hover */
.card-hover { transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(10,22,40,0.12), 0 4px 12px rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); }

/* Fade-in Animation */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16,1,0.3,1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Float Animation */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.float-anim { animation: float 6s ease-in-out infinite; }
.float-anim-delay { animation: float 6s ease-in-out 2s infinite; }

/* Floating Glass Pill Header (Desktop) */
@media (min-width: 1024px) {
  .nav-scrolled { top: 1rem !important; left: 1rem !important; right: 1rem !important; width: calc(100% - 2rem) !important; max-width: 1200px !important; margin: 0 auto; border-radius: 9999px !important; background: rgba(10,22,40,0.85) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important; }
  .nav-scrolled .h-24 { height: 4.5rem !important; transition: height 0.3s ease; }
  .nav-scrolled img.h-20 { height: 3rem !important; transition: height 0.3s ease; }
}

/* Mobile — nav-scrolled adds background + shadow only (keeps full-width bar so the mobile dropdown works) */
.nav-scrolled { background: rgba(10,22,40,0.95) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important; }

/* Hamburger */
.hamburger span { transition: all 0.3s ease; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a1628; }
::-webkit-scrollbar-thumb { background: #1e3f7a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a5298; }

/* Capabilities — Spec Grid */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.spec-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background: #f6f7f9; border-radius: 0.75rem; font-size: 0.875rem; color: #343a45; }
.spec-item svg { color: #3b82f6; flex-shrink: 0; }
.section-divider { background: linear-gradient(90deg, transparent, rgba(59,130,246,0.15), transparent); height: 1px; }

/* Logistics — Incoterm Cards */
.incoterm-card { transition: all 0.3s ease; }
.incoterm-card:hover { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.2); }

/* Contact — Form Inputs */
.form-input { width: 100%; background: white; border: 1px solid #d5d9e2; border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: #343a45; transition: all 0.2s; }
.form-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.form-input::placeholder { color: #b0b8c8; }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2366748d' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4h-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }

/* Language Switching */
[data-lang="zh"] { display: none; }
body.lang-zh [data-lang="en"] { display: none !important; }
body.lang-zh [data-lang="zh"] { display: inline !important; }
body.lang-zh [data-lang-zh-block="true"] { display: block !important; }
body.lang-zh [data-lang-en-block="true"] { display: none !important; }
body.lang-zh [data-lang-zh-flex="true"] { display: flex !important; }
body.lang-zh [data-lang-en-flex="true"] { display: none !important; }
body.lang-zh [data-lang-zh-li="true"] { display: list-item !important; }
body.lang-zh [data-lang-en-li="true"] { display: none !important; }
body.lang-zh [data-block-zh] { display: block !important; }
body.lang-zh [data-block-en] { display: none !important; }
span[data-lang="zh"], a[data-lang="zh"], div[data-lang="zh"], p[data-lang="zh"], li[data-lang="zh"], h1[data-lang="zh"], h2[data-lang="zh"], h3[data-lang="zh"], h4[data-lang="zh"], label[data-lang="zh"], option[data-lang="zh"], button[data-lang="zh"], textarea[data-lang="zh"] { display: none; }
body.lang-zh span[data-lang="zh"], body.lang-zh a[data-lang="zh"], body.lang-zh div[data-lang="zh"], body.lang-zh p[data-lang="zh"], body.lang-zh li[data-lang="zh"], body.lang-zh h1[data-lang="zh"], body.lang-zh h2[data-lang="zh"], body.lang-zh h3[data-lang="zh"], body.lang-zh h4[data-lang="zh"], body.lang-zh label[data-lang="zh"], body.lang-zh option[data-lang="zh"], body.lang-zh button[data-lang="zh"] { display: inline !important; }
body.lang-zh div[data-lang="zh"], body.lang-zh p[data-lang="zh"] { display: block !important; }

/* Language Button Active State */
.lang-btn-active { background: rgba(59,130,246,0.2); color: #60a5fa; border-color: rgba(59,130,246,0.3); }