/* ====================================================================
   CARJU JAPAN — Premium Glass Theme (Safe Replacement)
   - Same class/ID names → no breakage
   - Stronger glass, depth, and polish
   - Mobile-safe / accessible contrasts
==================================================================== */

/* ---------- Brand tokens ---------- */
:root{
  --brand:#e31c23;             /* CARJU red */
  --brand-ink:#a11218;         /* darker red for borders/hover */
  --ink:#0b0b0b;
  --muted:#63666a;
  --panel:#ffffff;             /* base card */
  --bg:#f6f7fb;                /* soft paper bg */

  --radius:16px;
  --radius-sm:12px;

  --glass-bg: rgba(255,255,255,.78);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.55);
  --glass-inner: rgba(255,255,255,.35);
  --glass-shadow: 0 18px 48px rgba(10,16,20,.18);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 4px 12px rgba(10,16,20,.08);
  --shadow-md: 0 10px 26px rgba(10,16,20,.12);
  --shadow-lg: 0 20px 54px rgba(10,16,20,.18);
  --shadow-xl: 0 34px 86px rgba(10,16,20,.24);

  --ring: 0 0 0 5px rgba(227,28,35,.10);
}

/* ---------- Resets ---------- */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0; color:var(--ink);
  background: radial-gradient(1200px 600px at -15% -20%, rgba(227,28,35,.04), transparent 60%),
              radial-gradient(1000px 600px at 115% -30%, rgba(227,28,35,.05), transparent 60%),
              var(--bg);
  font:16px/1.6 'Montserrat','Noto Sans JP', system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,.title{font-family:'Montserrat','Noto Sans JP',sans-serif}
h1{font-weight:800; letter-spacing:.2px; margin:.2em 0}
h2{font-weight:800; margin:.2em 0}
h3{font-weight:700; margin:.2em 0}
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }
.hidden{ display:none !important }

/* ---------- Layout ---------- */
.container{ max-width:1180px; margin:0 auto; padding:22px }

/* Header + Nav (glass bar) */
.header{
  position:relative; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  border-radius: 0 0 var(--radius) var(--radius);
}
.brand{display:flex; gap:10px; align-items:center}
.brand img{ width:44px; height:44px; object-fit:contain; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)) }
.brand .title{ color:var(--ink); letter-spacing:.2px; font-weight:800 }
.kicker{ color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:12px }

/* Top nav (desktop) */
.nav{ display:flex; gap:10px; flex-wrap:wrap }
.nav a{
  color:var(--ink); font-weight:700;
  padding:10px 12px; border-radius:12px;
  transition: background .18s ease, transform .18s ease;
}
.nav a:hover{ background:rgba(0,0,0,.045); text-decoration:none; transform:translateY(-1px) }

/* Language pills */
.lang{ display:flex; gap:8px }
.badge{
  padding:7px 12px; border-radius:999px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));
  border:1px solid #e8e8e8; font-size:13px;
  box-shadow: var(--shadow-xs);
}

/* ---------- Promo bar ---------- */
.promo-bar{
  position:sticky; top:0; z-index:1200;
  background: linear-gradient(90deg, #e31c23, #a11218);
  color:#fff; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:8px 12px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(163,18,24,.35);
}
.promo-link{
  color:#fff; background:rgba(255,255,255,.16);
  padding:7px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.22);
}
.promo-link:hover{ filter:brightness(1.05) }
.promo-bar-close{ background:transparent; border:none; color:#fff; cursor:pointer; font-size:20px; line-height:1; padding:0 6px; margin-left:4px }
.promo-bar.hidden{ display:none !important }

/* ---------- Generic cards ---------- */
.card{
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px) }
.card.overlay{
  background: var(--glass-bg-strong);
  border-color:var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ---------- Icon row ---------- */
.icon-row{ display:grid; gap:14px; margin:10px 0 6px; grid-template-columns: repeat(6, minmax(0,1fr)) }
.icon-tile{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  border:1px solid #eee; border-radius:12px;
  padding:12px; text-align:center; box-shadow:var(--shadow-xs);
  transition: transform .18s ease, box-shadow .18s ease;
}
.icon-tile:hover{ box-shadow:var(--shadow-md); transform: translateY(-2px) }
.icon-tile img{ width:36px; height:36px; object-fit:contain; display:block; margin:0 auto 6px }
.icon-tile span{ font-weight:700; font-size:13px }

/* ---------- Grids ---------- */
.grid{ display:grid; gap:16px }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)) }

/* ---------- Services (glass cards) ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.service-card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  padding:20px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
  cursor:pointer;
  overflow:hidden;
  position:relative;
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg) }
.service-card .inner{ display:flex; flex-direction:column; gap:8px; text-align:left }
.service-card .icon-wrap{
  width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:#fff; border:1px solid #eee; box-shadow:var(--shadow-xs);
  font-size:28px; transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover .icon-wrap{ transform: translateY(-2px) scale(1.04); box-shadow:var(--shadow-sm) }
.service-card h3{ margin:6px 0 2px; color:var(--brand); font-weight:800 }
.service-card p{ margin:0; color:#3a3a3a }

/* expandable text used on Services */
.hidden-text{ display:none; margin-top:10px; color:#444; line-height:1.55; animation: fadeIn .35s ease }
.read-more-btn{
  display:inline-block; background:none; border:none; color:var(--brand);
  font-weight:700; cursor:pointer; margin-top:6px; text-decoration:underline;
}

/* Hex & Fancy variants preserved */
.service-card.hex{
  position:relative; background:#fff; border:1px solid #eee;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  padding:30px 26px 28px; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.services-grid:hover .service-card.hex{ opacity:.92; transform: translateY(0) scale(.985) }
.service-card.hex:hover{ opacity:1; transform: translateY(-10px) scale(1.02); box-shadow: var(--shadow-lg); z-index:2 }
.service-card.fancy{
  border:1px solid transparent; border-radius:16px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(227,28,35,.28), rgba(0,0,0,.08)) border-box;
  box-shadow: var(--shadow-sm);
  padding:20px 18px;
}

/* Scroll reveal */
.services-grid .service-card{ opacity:.001; transform: translateY(14px) scale(.98); will-change:transform,opacity }
.services-grid .service-card.in-view{ opacity:1; transform: translateY(0) scale(1) }

/* ---------- Why Choose CARJU ---------- */
.why-us{ max-width:1180px; margin:34px auto 12px; padding:0 14px }
.why-us h2{ text-align:center; margin-bottom:18px }
.why-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)) }
.why-item{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border:1px solid rgba(255,255,255,.75);
  border-radius:16px; padding:18px;
  box-shadow: var(--shadow-sm);
  transition:box-shadow .18s ease, transform .18s ease;
}
.why-item:hover{ box-shadow:var(--shadow-md); transform: translateY(-3px) }
.why-item h3{ margin:0 0 6px; color:var(--brand) }
.why-item p{ margin:0; color:#3b3b3b }
.why-more{ display:inline-block; margin-top:10px; font-weight:700; font-size:13px; color:var(--brand) }
.why-more::after{ content:" ›"; }

/* ---------- Sliders ---------- */
.slider{
  position:relative; width:100%; max-width:980px;
  margin: 14px auto 0;
  border:1px solid rgba(255,255,255,.7); border-radius:14px;
  overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  box-shadow: var(--shadow-lg);
}
.slider figure{ margin:0; position:relative }
.slider img{ width:100%; height:380px; object-fit:cover; display:block; filter:saturate(103%) contrast(102%) }
.slider figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  color:#fff; padding:10px 12px; font-size:14px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.6); cursor:pointer; color:#fff;
  background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, background .15s ease; z-index:3;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.slider-arrow:hover{ transform:translateY(-50%) scale(1.08); background: rgba(0,0,0,.6) }
.slider-arrow.prev{ left:10px } .slider-arrow.next{ right:10px }
.slider-dots{
  position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; z-index:4;
}
.slider-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.14); cursor:pointer; box-shadow:var(--shadow-xs) }
.slider-dot.active{ background:var(--brand); border-color:var(--brand-ink) }

@keyframes slideInFromRight{ from{ transform:translateX(100%); opacity:.3 } to{ transform:translateX(0); opacity:1 } }
@keyframes slideOutToLeft{ from{ transform:translateX(0); opacity:1 } to{ transform:translateX(-100%); opacity:.3 } }
.slide-enter{ animation: slideInFromRight 520ms ease both }
.slide-exit{ animation: slideOutToLeft 520ms ease both }

/* ---------- Forms / buttons ---------- */
form{ display:grid; gap:10px; margin-top:10px }
input,textarea,select{
  width:100%; padding:12px; border:1px solid rgba(0,0,0,.12);
  border-radius:12px; font-family:inherit; background: linear-gradient(180deg, #fff, #fafafa);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--brand); box-shadow: var(--ring);
}
.btn{
  display:inline-block; background:linear-gradient(180deg,#e31c23,#c0161c); color:#fff; padding:12px 16px;
  border-radius:12px; border:1px solid var(--brand-ink); font-weight:800; letter-spacing:.2px;
  box-shadow: 0 10px 26px rgba(227,28,35,.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ filter:brightness(1.02); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(227,28,35,.34) }

/* ---------- Tables (Fees) ---------- */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#fff,#fafafa);
  min-width:560px; box-shadow: var(--shadow-sm);
}
.table th,.table td{ padding:12px 14px; border-bottom:1px solid #f0f0f0; text-align:left }
.table th{ background:#f7f7f9; font-weight:800 }

/* ---------- Gallery grid (home brand/category) ---------- */
.grid.gallery, .gallery{ display:grid; gap:14px; grid-template-columns:repeat(4, minmax(0,1fr)) }
.gallery figure{
  margin:0; border:1px solid rgba(255,255,255,.7); border-radius:14px; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery figure:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md) }
.gallery img{ width:100%; height:170px; object-fit:cover; display:block }
.gallery figcaption{ padding:8px 10px; font-size:13px; color:#333; border-top:1px solid #f2f2f2 }
.gallery .placeholder{
  height:170px; border:1px dashed #ccc; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#999; font-size:13px; background:#fafafa
}

/* ---------- Footer ---------- */
.footer{
  margin-top:34px; padding:28px 18px; color:var(--muted);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.82));
  border-top:1px solid rgba(255,255,255,.7); text-align:center; box-shadow: var(--shadow-sm)
}
.footer .socials{ margin-bottom:10px }
.footer .socials a{ display:inline-block; margin:0 10px; transition: transform .18s ease }
.footer .socials a:hover{ transform: translateY(-2px) scale(1.05) }
.footer-text{ font-size:.95rem }

/* ---------- Animation banner ---------- */
.anim-banner{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
}
.anim-banner .logistics-anim{ max-width:1120px; margin:auto }
.anim-banner svg{ width:100%; height:auto }
.la-world-img,.la-japan-img{ width:90px !important; height:auto !important }
.la-ship-img{ width:140px !important; height:auto !important; filter:contrast(110%) saturate(115%); opacity:.96 }
@keyframes carju-ship-japan-to-world{
  0%{ transform: translateX(750px) translateY(0) scale(.98); opacity:0 }
  6%{ opacity:1 }
  30%{ transform: translateX(550px) translateY(-6px) scale(.98) }
  60%{ transform: translateX(320px) translateY(-10px) scale(.98) }
  85%{ transform: translateX(120px) translateY(-4px) scale(.98) }
  100%{ transform: translateX(60px) translateY(0) scale(.98); opacity:0 }
}
.la-ship-wrap{
  animation: carju-ship-japan-to-world 16s linear infinite !important;
  will-change: transform, opacity; transform-box: fill-box; transform-origin: center;
}

/* ---------- Mobile hamburger ---------- */
.hamburger{
  display:none; background:linear-gradient(180deg,#fff,#f5f5f5);
  border:1px solid #ddd; border-radius:12px; padding:9px 12px; font-size:16px; font-weight:800;
  box-shadow: var(--shadow-xs);
}
.header{ position:relative; z-index:100 }

@media (max-width:860px){
  .header{ gap:10px; flex-wrap:wrap }
  .hamburger{ display:inline-block }
  .header .lang{ order:3 }
  .nav{
    display:none !important; position:absolute; top:64px; left:0; right:0; margin:0 auto;
    width:min(94vw,560px);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
    backdrop-filter: blur(14px);
    border:1px solid rgba(255,255,255,.7); border-radius:14px;
    box-shadow: var(--shadow-lg); flex-direction:column; padding:10px; z-index:999;
  }
  .nav.open{ display:flex !important }
  .nav a{ padding:12px 14px; border-radius:10px; text-decoration:none; font-weight:800 }
  .nav a + a{ border-top:1px solid #f2f2f2 }
  .nav a:hover{ background:rgba(0,0,0,.04); text-decoration:none }
}

/* ---------- FAQ premium polish ---------- */
.faq-hero{
  background:
    radial-gradient(1200px 400px at -10% -30%, rgba(227,28,35,.10), transparent 60%),
    radial-gradient(1000px 380px at 110% -40%, rgba(227,28,35,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border-bottom:1px solid rgba(255,255,255,.75); padding:26px 0 18px;
  backdrop-filter: blur(10px);
}
.faq-hero-inner{text-align:center}
.faq-hero h1{ margin:6px 0 4px; letter-spacing:.2px; animation:fadeUp .6s ease both }
.faq-sub{ margin:0 0 12px; color:var(--muted); animation:fadeUp .6s ease .05s both }
.faq-search{ display:flex; justify-content:center; margin:10px 0 8px; animation:fadeUp .6s ease .1s both }
.faq-search input{
  width:min(720px,96%); padding:12px 14px; border:1px solid #ddd; border-radius:12px; font-size:15px; outline:none;
  background:#fff;
}
.faq-search input:focus{ border-color:var(--brand); box-shadow:var(--ring) }
.faq-quick{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px; animation:fadeUp .6s ease .15s both }
.chip{ padding:8px 12px; border-radius:999px; background:linear-gradient(180deg,#fff,#f7f7f7); border:1px solid #eee; cursor:pointer; font-weight:700; box-shadow:var(--shadow-xs) }
.chip:hover{ background:#fafafa }
.faq-grid{ margin:18px 0 26px; display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (max-width:860px){ .faq-grid{ grid-template-columns:1fr } }
.faq-item{
  border:1px solid rgba(255,255,255,.75); border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  box-shadow: var(--shadow-sm);
  overflow:hidden; transform: translateY(6px); animation:floatIn .5s ease forwards;
}
.faq-q{
  width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  font: 800 18px/1.3 'Montserrat','Noto Sans JP',sans-serif;
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
}
.faq-q .chev{ transition: transform .25s ease }
.faq-q[aria-expanded="true"] .chev{ transform: rotate(180deg) }
.faq-a{ padding:0 16px 14px; max-height:0; overflow:hidden; transition:max-height .28s ease; border-top:1px solid #f1f1f1 }
.faq-a p{ margin:12px 0 0 }
.faq-cta{ display:flex; align-items:center; justify-content:space-between; gap:14px }
.faq-cta-actions{ display:flex; gap:10px; flex-wrap:wrap }
@media (max-width:720px){ .faq-cta{ flex-direction:column; align-items:flex-start } }
@keyframes floatIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }

/* ---------- HERO: photo + panel ---------- */
.hero-banner{ margin: 14px 0 24px; }
.hero-banner.hero-photo{
  position: relative; border: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-xl);
}
.hero-banner.hero-photo::before{
  content:""; position:absolute; inset:0;
  background: var(--hero, none) center/cover no-repeat;
  transform: scale(1.02);
}
.hero-banner.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 20% 40%, rgba(0,0,0,.48), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,0) 72%);
}
.hero-banner.hero-photo .hero-inner{
  position: relative; z-index: 2;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 26px;
  align-items: center; min-height: 420px; padding: 26px;
}
.hero-banner.hero-photo .hero-copy{ color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); padding: 6px 2px }
.hero-banner.hero-photo .hero-copy h1{ margin: 0 0 10px }
.hero-banner.hero-photo .hero-copy p{ margin: 0 0 14px; color: #f3f3f3 }
.hero-banner.hero-photo .hero-cta .btn{ box-shadow: 0 8px 22px rgba(0,0,0,.18) }
.hero-banner.hero-photo .hero-cta .btn + .btn{ margin-left: 10px; background:#fff; color: var(--brand); border-color:#ddd }

/* Ultra-transparent glass panel */
.hero-banner.hero-photo .hero-panel{
  justify-self: end; width: 100%; max-width: 380px;
  background: rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.55); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(10,16,20,.28), inset 0 1px 0 rgba(255,255,255,.6);
  padding: 16px;
}
.hero-banner.hero-photo .hero-panel h3{ margin: 0 0 10px; color:#111; text-shadow: 0 1px 2px rgba(255,255,255,.35) }
.hero-banner.hero-photo .hero-panel .field{ margin-bottom: 10px }
.hero-banner.hero-photo .hero-panel input,
.hero-banner.hero-photo .hero-panel select{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.08);
  color: #0a0a0a;
}

/* HERO for non-home (simple gradient) */
.hero-banner.simple-hero{
  background: linear-gradient(180deg, #f3f4f7 0%, #ffffff 100%);
  border-radius: 0; box-shadow: none; padding: 10px 0; margin-bottom: 20px;
}
.hero-banner.simple-hero .anim-banner{ background: transparent; padding: 0 }

/* ---------- Brand & Category glass grid ---------- */
.brand-category-section{ position: relative; z-index: 5; margin-top: 22px }
#brandSelect, #categorySelect{ position: relative; z-index: 10 }
#brandGrid{ --glass-bg: rgba(255,255,255,.84); --glass-brd: rgba(0,0,0,.07); gap: 18px }
#brandGrid .card{
  position:relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.7); border-radius:16px;
  box-shadow: 0 14px 40px rgba(10,16,20,.16), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
#brandGrid .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 56px rgba(10,16,20,.22), inset 0 1px 0 rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.8);
}
#brandGrid .card img{
  width:100%; height:180px; object-fit:cover;
  border-radius:12px; border:1px solid #ececec;
  transition: transform .35s ease, opacity .2s ease;
}
#brandGrid .card:hover img{ transform: scale(1.03) }
#brandGrid .card h3{ margin:10px 10px 4px; font-size:16px; line-height:1.2 }
#brandGrid .card p{ margin:0 10px 8px; color:#444; font-size:13px }
#brandGrid .card p + p{
  background: rgba(227,28,35,.08);
  display:inline-block; margin:2px 10px 12px; padding:6px 10px;
  border-radius:999px; border:1px solid rgba(227,28,35,.18); font-weight:700;
}

/* ---------- HERO animation (home) ---------- */
.hero-banner.hero-photo .anim-banner{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  display:flex; justify-content:center; align-items:center; opacity:.9;
}
.hero-banner.hero-photo .hero-inner{ position:relative; z-index:2 }
.hero-banner.hero-photo .la-ship-wrap{ animation: none !important } /* stop straight ship in hero */
.la-world-wrap, .la-japan-wrap{ animation: float 6s ease-in-out infinite alternate }
@keyframes float{ from{ transform: translateY(0) } to{ transform: translateY(-10px) } }
.route-path{ stroke-dashoffset: 0; animation: route-dash 2.5s linear infinite; stroke: rgba(255,255,255,.78) }
@keyframes route-dash{ from { stroke-dashoffset: 0 } to { stroke-dashoffset: -56 } }
.hero-banner .anim-banner svg{
  width: 100%; height: 260px; position: absolute; top: 20px; left: 0; right: 0;
}
.la-world-wrap image { transform-origin: center; transform: scale(1.1) }
.la-japan-wrap image { transform-origin: center; transform: scale(1.2) }
.ship-on-route image { transform: scaleY(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)) }

/* ---------- Icons (footer) ---------- */
.icon{ width:28px; height:28px; display:inline-block; background-size:contain; background-repeat:no-repeat; margin-right:8px }
.icon#wa-link{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="16" fill="%23e31c23"/><path fill="#fff" d="M21.9 17.9c-.2-.1-1.6-.8-1.8-.9-.3-.1-.5-.1-.7.2-.2.3-.6 1-.8 1.2-.1.2-.3.2-.6.1-.3-.1-1.1-.4-2.1-1.3-.8-.7-1.3-1.5-1.5-1.8-.2-.3 0-.5.1-.7.1-.1.3-.3.5-.5.1-.2.2-.3.3-.5.1-.2.1-.4 0-.6-.1-.2-.7-1.6-1-2.2-.2-.6-.6-.5-.8-.5h-.7c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.6 0 1.5 1.1 2.9 1.3 3.1.2.3 2.2 3.2 5.3 4.3 3.1 1 3.1.6 3.6.6.6 0 1.7-.7 1.9-1.3.2-.6.2-1.1.1-1.3z"/></svg>')}
.icon#tiktok-link{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23999" d="M12.87 3h2.19c.21 1.73 1.34 3.2 2.95 3.9a6.5 6.5 0 0 0 2.32.5v2.26a8.71 8.71 0 0 1-4.05-1.1c-.51-.3-.98-.65-1.4-1.04v6.62a5.76 5.76 0 1 1-5.76-5.76c.38 0 .75.04 1.11.12v2.35a3.41 3.41 0 1 0 2.35 3.25V3z"/></svg>')}

/* ---------- Generic reveal ---------- */
.reveal{ opacity:.001; transform: translateY(14px) scale(.985); transition: opacity .5s ease, transform .5s ease, box-shadow .3s ease; will-change: transform, opacity }
.reveal.in-view{ opacity:1; transform: translateY(0) scale(1) }

/* ---------- Responsive tweaks ---------- */
@media (max-width:1180px){ .container{ padding:18px } }
@media (max-width:1024px){
  .grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .gallery{ grid-template-columns:repeat(3, minmax(0,1fr)) }
}
@media (max-width:860px){
  .hero-banner.hero-photo .hero-inner{ grid-template-columns:1fr; min-height:0; gap:16px; padding:18px }
  .hero-banner.hero-photo .hero-panel{ justify-self: stretch; max-width: 100% }
}
@media (max-width:720px){
  .hero{ grid-template-columns:1fr }
  .grid-2{ grid-template-columns:1fr }
  .grid-3{ grid-template-columns:1fr }
  .gallery{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .slider img{ height:240px }
}
@media (max-width:420px){ .gallery{ grid-template-columns:1fr } }

/* ---------- Read-more block (legacy support) ---------- */
.hidden-text.open{ display:block }

/* ---------- WHY CHOOSE mobile fix ---------- */
@media (max-width: 860px){
  .why-grid{ grid-template-columns: 1fr !important; gap: 14px }
  .why-item{ padding: 16px }
  .why-item h3{ font-size: 20px; line-height: 1.25 }
  .why-item p{ font-size: 16px }
  .why-item .why-more, .why-item .read-more{ display:inline-block; margin-top:10px }
}

/* ---------- Keyframes ---------- */
@keyframes fadeIn{ from { opacity: 0; transform: translateY(-5px) } to { opacity: 1; transform: translateY(0) } }
/* ===========================
   PATCH — Glass & Mobile fixes
   paste at the END of styles.css
   =========================== */

/* --- 1) Let the hero animation show through the first section cards
        on pages that use a hero (simple or photo). --- */
.hero-banner.simple-hero + .container .card,
.hero-banner.hero-photo  + .container .card {
  background: rgba(255,255,255,.28) !important;   /* more see-through */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.50);
  box-shadow:
    0 10px 28px rgba(10,16,20,.18),
    inset 0 1px 0 rgba(255,255,255,.40);
}

/* Round the very large cards on those pages a bit more for a premium feel */
.hero-banner.simple-hero + .container .card,
.hero-banner.hero-photo  + .container .card {
  border-radius: 18px;
}

/* --- 2) Fees page: make the card + table glassy too. 
      (Works whether #feesTable is a <div> or an actual <table>.) --- */
#feesTable .table,
.table {
  background: rgba(255,255,255,.20) !important;
  border: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Header row a touch less transparent for readability */
.table th {
  background: rgba(255,255,255,.55) !important;
  font-weight: 800;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Body rows: soft zebra with transparency that still shows the map/ship */
.table tbody tr:nth-child(odd) td {
  background: rgba(255,255,255,.34);
}
.table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.26);
}
.table td {
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* If your fees table is wrapped by a generated card, match its glass look */
#feesTable .card {
  background: rgba(255,255,255,.26) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.50);
  box-shadow:
    0 10px 28px rgba(10,16,20,.18),
    inset 0 1px 0 rgba(255,255,255,.40);
}

/* --- 3) Contact blocks: extra-transparent glass (so animation is clearly visible). --- */
.section-contact .card,
#contact .card {
  background: rgba(255,255,255,.24) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.48);
}

/* --- 4) Mobile services grid: force 1 per row (some themes overrode earlier rules). --- */
@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card.hex { clip-path: none !important; border-radius: 14px !important; }
}
@media (max-width: 768px) {
  svg[viewBox="0 0 1200 550"] {
    transform: scale(1.2);
    transform-origin: center;
  }
}
/* Extra safety: small phones */
@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr !important; }
}

/* --- 5) Keep hero overlays from blocking clicks below (safety). --- */
.hero-banner.hero-photo::before,
.hero-banner.hero-photo::after {
  pointer-events: none !important;
}

.card.glass {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.4);
}
.doc-preview {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.4);
  margin-top: 10px;
}

@media (max-width: 860px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === PATCH v2 — animation behind headings + glass + mobile fixes === */

/* Put the animation behind the page h1 on Services / Fees / Contact */
.page-hero{position:relative; padding:14px 0 10px; margin:6px 0 10px}
.page-hero .anim-banner{position:absolute; top:-8px; left:0; right:0; height:210px; z-index:0; pointer-events:none}
.page-hero .anim-banner svg{width:100%; height:100%}
.page-hero h1,.page-hero p{position:relative; z-index:2}

/* Make the very first intro card extra transparent so the animation is visible */
.card.glass.hero-intro{
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 30px rgba(10,16,20,.18), inset 0 1px 0 rgba(255,255,255,.45)
}

/* Services grid: force single column on phones */
@media (max-width:760px){
  .services-grid{ grid-template-columns:1fr !important; }
}

/* Index hero: make the animation and ship bigger (esp. mobile) */
.hero-banner.hero-photo .anim-banner svg{ height:300px }
.hero-banner.hero-photo .la-ship-img{ width:180px !important; height:auto !important }
.hero-banner.hero-photo .la-world-img{ width:110px !important }
.hero-banner.hero-photo .la-japan-img{ width:160px !important }
@media (max-width:860px){
  .hero-banner.hero-photo .anim-banner svg{ height:340px }
  .hero-banner.hero-photo .la-ship-img{ width:200px !important }
}

/* Deep-link offset for #how-it-works */
#how-it-works{ scroll-margin-top:100px }

/* About page spacing */
.section-stack{ display:grid; gap:18px }
.section-stack .card{ margin:0 }

/* Slightly softer glass site-wide */
.card.glass{ background:rgba(255,255,255,.78) }
.page-hero {
  position: relative;
  padding: 20px 0 40px;
  margin: 6px 0 10px;
  text-align: center;
}

.page-hero .anim-banner {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 210px;
  z-index: 0;
  pointer-events: none;
}

.page-hero .anim-banner svg {
  width: 100%;
  height: 100%;
}

.page-hero h1,
.page-hero p {
  position: relative;
  z-index: 2;
}

.services-grid {
  margin-top: 30px;
}

@media (max-width: 760px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ===== About page polish ===== */

/* Big vertical rhythm between blocks */
.stack-xl { display:grid; gap: 22px; }

/* Bio + Values + Docs grids */
.about-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.values-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.doc-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }

.bio, .value, .doc {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

/* Make top-level cards feel premium */
.card.glass.reveal {
  padding: 18px;
  box-shadow: var(--shadow-md);
}

/* Bullet list style */
ul.bullet { padding-left: 18px; margin: 8px 0 0; }
ul.bullet li { margin: 6px 0; }

/* Ensure read-more content stays hidden until clicked (works with your script.js) */
.card .more.hidden { display: none; }

/* Responsive */
@media (max-width:1024px){
  .values-grid, .doc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:720px){
  .about-grid, .values-grid, .doc-grid { grid-template-columns: 1fr; }
  .card.glass.reveal { padding: 16px; }
}

.hero-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .hero-svg image {
    width: 80px;   /* Make ship/map smaller but visible */
    height: auto;
  }
}
.more.hidden {
  display: none;
}
/* Entrance animation */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Base TikTok section styling (same as before) */
.tiktok-section {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 40px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0;                     /* hide before reveal */
  transform: translateY(30px);    /* initial offset */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tiktok-section.in-view {
  opacity: 1;
  transform: translateY(0);
}

.tiktok-section h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #fff;
  animation: fadeInUp 0.8s ease forwards;
}

.tiktok-section p {
  margin-bottom: 20px;
  color: #ddd;
  animation: fadeInUp 0.8s ease 0.2s forwards;
}

.video-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* TikTok button style */
.tiktok-section a {
  font-weight: 600;
  color: #fff;
  background: linear-gradient(45deg, #25F4EE, #FE2C55);
  padding: 12px 24px;
  border-radius: 30px;
  display: inline-block;
  margin-top: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tiktok-section a:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
/* --- Make "How It Works" heading stand out --- */
#how-it-works h2 {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

#how-it-works p {
  color: #f5f5f5;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  font-size: 1.1rem;
}
#how-it-works h2,
#how-it-works p {
  background: rgba(0,0,0,0.45);
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-block;
}
.why-more {
  display: inline-block;
  margin-top: 8px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: 0.25s ease;
}

.why-more:hover {
  border-bottom-color: var(--brand);
}

.more {
  margin-top: 10px;
  transition: all 0.35s ease;
}
.hidden {
  display: none !important;
}
/* ===== Header compact layout ===== */
.header--compact {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Make the logo act as the left anchor */
.header--compact .header-logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto; /* pushes the rest to the right */
}
.header--compact .header-logo img {
  height: 44px; /* desktop height */
  width: auto;
}

/* Put hamburger on the right (mobile) */
.header--compact .hamburger {
  margin-left: 12px;
}

/* Language block inside menu: nice spacing */
.nav .lang--menu {
  padding: 10px 0;
  margin-top: 8px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}

/* Desktop: show nav inline, hide hamburger */
@media (min-width: 861px) {
  .header--compact .hamburger { display: none; }

  .header--compact .nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .nav .lang--menu {
    border: 0;
    margin-top: 0;
    padding: 0;
  }
}

/* Mobile: bigger logo like you asked */
@media (max-width: 860px) {
  .header--compact .header-logo img {
    height: 54px; /* increase logo size on mobile */
  }
}