/*
Theme Name: Li-Dah Construction Machinery
Theme URI: https://lcmahine.com
Author: Li-Dah Construction Machinery
Author URI: https://lcmahine.com
Description: Apple-inspired theme for Li-Dah aerial work platform rental. Multi-brand equipment catalog, knowledge center, merchandise shop. GEO/AEO optimized.
Version: 4.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lidah
Requires at least: 6.0
Requires PHP: 7.4
*/

/* ============================================
   DESIGN SYSTEM
   ============================================ */
:root {
  --color-primary: #E8630A;
  --color-primary-hover: #D05A09;
  --color-text: #1D1D1F;
  --color-text-secondary: #86868B;
  --color-text-tertiary: #ABABAF;
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F5F5F7;
  --color-bg-tertiary: #FBFBFD;
  --color-border: rgba(0,0,0,0.08);
  --color-border-hover: rgba(0,0,0,0.16);
  --color-dark: #1D1D1F;
  --color-dark-secondary: #2C2C2E;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 980px;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 12px 30px rgba(0,0,0,0.08);
  --transition-base: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --max-width: 1200px;
  --nav-height: 48px;
}

/* ============================================
   GRADIENT TEXT (Apple-style)
   ============================================ */
.text-gradient { background: linear-gradient(90deg, #E8630A 0%, #F59E0B 50%, #E8630A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient--apple { background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 20%, #D946EF 40%, #EC4899 60%, #F97316 80%, #EAB308 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient--blue { background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient--green { background: linear-gradient(90deg, #059669 0%, #2DD4BF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient--purple { background: linear-gradient(90deg, #7C3AED 0%, #EC4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; }

/* ============================================
   LAYOUT
   ============================================ */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 60px 0; }
.section--alt { background: var(--color-bg-secondary); }
.section__title { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 8px; }
.section__subtitle { font-size: 17px; color: var(--color-text-secondary); margin-bottom: 32px; }

/* ============================================
   NAVIGATION
   ============================================ */
.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(251,251,253,0.88); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--color-border); height: var(--nav-height); }
.site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.site-nav__logo { font-size: 16px; font-weight: 600; color: var(--color-text); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.site-nav__logo img, .site-nav__logo-img { height: 36px; width: auto; max-width: 160px; object-fit: contain; }
.site-nav__mob-merch { display: none; }

.site-nav__menu { display: flex; align-items: center; gap: 24px; }
.site-nav__link { font-size: 14px; color: var(--color-text-secondary); transition: color 0.2s; }
.site-nav__link:hover, .site-nav__link--active { color: var(--color-text); }
.site-nav__cta { font-size: 13px; color: #fff; background: var(--color-primary); padding: 6px 16px; border-radius: var(--radius-pill); transition: background 0.2s; }
.site-nav__cta:hover { background: var(--color-primary-hover); }
.mob-tab { display: none; }

/* ============================================
   HERO / HOMEPAGE
   ============================================ */
.hero { text-align: center; padding: 48px 0 0; }
.hero__title { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; }
.hero__subtitle { font-size: 17px; color: var(--color-text-secondary); margin-top: 8px; }
.hero__cats { display: flex; gap: 32px; justify-content: center; margin-top: 28px; }
.hero__cat { text-align: center; cursor: pointer; transition: transform 0.2s; }
.hero__cat:hover { transform: scale(1.06); }
.hero__cat-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-bg-secondary); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; }
.hero__cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.hero__cat-name { font-size: 17px; }

/* ============================================
   HORIZONTAL SCROLL
   ============================================ */
.hscroll-wrap { position: relative; padding: 32px 0; }
.hscroll-wrap__title { font-size: 24px; font-weight: 600; padding: 0 24px 16px; }
.hscroll { display: flex; gap: 16px; padding: 0 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-behavior: smooth; cursor: grab; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll:active { cursor: grabbing; }
.hscroll-arrow { position: absolute; top: 50%; transform: translateY(-30%); width: 36px; height: 36px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; font-size: 16px; color: var(--color-text-secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: var(--transition-base); }
.hscroll-arrow:hover { background: var(--color-bg-secondary); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.hscroll-arrow--left { left: 8px; }
.hscroll-arrow--right { right: 8px; }

/* Scroll Card */
.scroll-card { flex: 0 0 220px; border-radius: var(--radius-xl); overflow: hidden; scroll-snap-align: start; cursor: pointer; transition: transform 0.35s, box-shadow 0.35s; background: var(--color-bg); border: 1px solid var(--color-border); }
@media (hover: hover) and (pointer: fine) {
  .scroll-card:hover { transform: scale(1.02); box-shadow: var(--shadow-card-hover); }
}
.scroll-card__image { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.scroll-card__image img { width: 100%; height: 100%; object-fit: cover; }
.scroll-card__model { font-size: 32px; font-weight: 600; opacity: 0.85; color: #fff; transition: var(--transition-bounce); }
@media (hover: hover) and (pointer: fine) {
  .scroll-card:hover .scroll-card__model { transform: scale(1.08) translateY(-3px); }
}
.scroll-card__badge { position: absolute; top: 10px; left: 10px; font-size: 12px; padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(6px); }
.scroll-card__body { padding: 14px 16px; }
.scroll-card__name { font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.scroll-card__tag { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 6px; }
.scroll-card__spec { font-size: 16px; }
.scroll-card__spec span { color: var(--color-primary); font-weight: 600; }

/* Gradient backgrounds for scroll cards */
.bg-dark { background: linear-gradient(155deg,#1D1D1F,#3A3A3C); }
.bg-blue { background: linear-gradient(155deg,#0066CC,#338ADD); }
.bg-green { background: linear-gradient(155deg,#1D7A3C,#2DA050); }
.bg-purple { background: linear-gradient(155deg,#5856D6,#7B79E0); }
.bg-red { background: linear-gradient(155deg,#CC2936,#E04450); }
.bg-orange { background: linear-gradient(155deg,#E8630A,#F08030); }
.bg-charcoal { background: linear-gradient(155deg,#2C2C2E,#48484A); }

/* ============================================
   EQUIPMENT CARD (GRID)
   ============================================ */
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.equip-card { background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); cursor: pointer; transition: transform var(--transition-base), box-shadow var(--transition-base); }
@media (hover: hover) and (pointer: fine) {
  .equip-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
  .equip-card:hover .equip-card__model-text { transform: scale(1.12) translateY(-3px); color: var(--color-text); }
}
.equip-card__image { aspect-ratio: 1/1; background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.equip-card__image img { width: 100%; height: 100%; object-fit: cover; }
.equip-card__model-text { font-size: 20px; font-weight: 600; color: var(--color-text-secondary); transition: var(--transition-bounce); }
.equip-card__type-badge { position: absolute; top: 8px; left: 8px; font-size: 16px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; }
.equip-card__body { padding: 12px 14px; }
.equip-card__meta { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 2px; }
.equip-card__name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.equip-card__specs { font-size: 14px; display: flex; gap: 12px; }
.equip-card__specs .label { color: var(--color-text-secondary); }
.equip-card__specs .value { font-weight: 600; }

/* ============================================
   IMAGE CAROUSEL
   ============================================ */
.carousel { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; background: var(--color-bg-secondary); }
.carousel__slides { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.carousel__slides::-webkit-scrollbar { display: none; }
.carousel__slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--color-text-secondary); transition: background 0.2s; z-index: 2; }
.carousel__arrow:hover { background: rgba(255,255,255,0.95); }
.carousel__arrow--left { left: 8px; }
.carousel__arrow--right { right: 8px; }
.carousel__dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); cursor: pointer; transition: background 0.2s; }
.carousel__dot--active { background: var(--color-primary); }
.carousel__thumbs { display: flex; gap: 8px; padding: 10px 0 0; }
.carousel__thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: 0.5; transition: opacity 0.2s, border-color 0.2s; }
.carousel__thumb--active { opacity: 1; border-color: var(--color-primary); }
.carousel__thumb:hover { opacity: 0.8; }
.carousel__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================
   EQUIPMENT DETAIL
   ============================================ */
.equip-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.equip-detail__brand { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-primary); margin-bottom: 4px; }
.equip-detail__title { font-size: 28px; font-weight: 600; margin-bottom: 6px; }
.equip-detail__tag { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 20px; }
.equip-detail__actions { margin-bottom: 24px; display: flex; gap: 10px; }
.btn-outline { font-size: 15px; padding: 9px 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-primary); color: var(--color-primary); cursor: pointer; transition: var(--transition-base); display: inline-block; }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-primary { font-size: 15px; padding: 9px 18px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; cursor: pointer; transition: background 0.2s; display: inline-block; }
.btn-primary:hover { background: var(--color-primary-hover); }

/* Spec Table */
.spec-table { margin-top: 20px; }
.spec-table__title { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.spec-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.spec-row:last-child { border-bottom: none; }
.spec-row__label { color: var(--color-text-secondary); }
.spec-row__value { font-weight: 600; text-align: right; }

/* ============================================
   MERCHANDISE CARD
   ============================================ */
.merch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.merch-card { background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); cursor: pointer; transition: transform var(--transition-base), box-shadow var(--transition-base); }
@media (hover: hover) and (pointer: fine) {
  .merch-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
}
.merch-card__image { aspect-ratio: 1/1; background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.merch-card__image img { width: 100%; height: 100%; object-fit: cover; }
.merch-card__body { padding: 12px 14px; }
.merch-card__name { font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.merch-card__desc { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 6px; }
.merch-card__price { font-size: 16px; font-weight: 600; color: var(--color-primary); }

/* Merchandise Detail */
.merch-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.merch-detail__cat { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-primary); margin-bottom: 4px; }
.merch-detail__title { font-size: 28px; font-weight: 600; margin-bottom: 6px; }
.merch-detail__price { font-size: 24px; font-weight: 600; color: var(--color-primary); margin-bottom: 14px; }
.merch-detail__desc { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 20px; }

/* ============================================
   ARTICLE CARD (KNOWLEDGE CENTER)
   ============================================ */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.article-card { background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); cursor: pointer; transition: transform var(--transition-base); }
@media (hover: hover) and (pointer: fine) {
  .article-card:hover { transform: translateY(-4px); }
}
.article-card__image { aspect-ratio: 16/10; background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.article-card__image img { width: 100%; height: 100%; object-fit: cover; }
.article-card__time { position: absolute; top: 8px; left: 8px; font-size: 16px; padding: 3px 8px; border-radius: 6px; color: #fff; }
.article-card__body { padding: 16px; }
.article-card__title { font-size: 16px; font-weight: 600; line-height: 1.4; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Article Detail */
.article-content { max-width: 720px; margin: 0 auto; }
.article-content h1 { font-size: 28px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.article-content .meta { font-size: 17px; color: var(--color-text-secondary); margin-bottom: 24px; }
.article-content .featured-image { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 28px; aspect-ratio: 16/9; background: var(--color-bg-secondary); }
.article-content .featured-image img { width: 100%; height: 100%; object-fit: cover; }
.article-body { font-size: 17px; line-height: 1.9; }
.article-body h2 { font-size: 20px; font-weight: 600; margin: 28px 0 12px; }
.article-body p { margin-bottom: 14px; }
.article-body .tip-box { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 17px; color: var(--color-text-secondary); line-height: 1.7; margin: 16px 0; }
.article-body .tip-box b, .article-body .tip-box strong { color: var(--color-text); font-weight: 600; }

/* ============================================
   FAQ (GEO/AEO)
   ============================================ */
.faq-section { margin-top: 32px; }
.faq-section__title { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 8px; }
.faq-item__question { padding: 14px 18px; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--color-bg); transition: background 0.2s; }
.faq-item__question:hover { background: var(--color-bg-secondary); }
.faq-item__arrow { font-size: 16px; color: var(--color-text-secondary); transition: transform 0.2s; }
.faq-item--open .faq-item__arrow { transform: rotate(90deg); }
.faq-item__answer { padding: 0 18px 16px; font-size: 17px; color: var(--color-text-secondary); line-height: 1.7; display: none; }
.faq-item--open .faq-item__answer { display: block; }

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.about-intro__eyebrow { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 6px; }
.about-intro__heading { font-size: 24px; font-weight: 600; line-height: 1.3; margin-bottom: 12px; }
.about-intro__text { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; }
.about-intro__image { aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-secondary); }
.about-intro__image img { width: 100%; height: 100%; object-fit: cover; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.stat-card { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: 18px; text-align: center; }
.stat-card__number { font-size: 28px; font-weight: 600; color: var(--color-primary); }
.stat-card__label { font-size: 16px; color: var(--color-text-secondary); margin-top: 4px; }

/* Timeline */
/* Timeline horizontal scroll cards */
.tl-hscroll-wrap { position: relative; margin-top: 24px; }
.tl-hscroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 max(24px, calc((100vw - 960px) / 2)); }
.tl-hscroll::-webkit-scrollbar { display: none; }
.tl-card { scroll-snap-align: start; flex-shrink: 0; width: 400px; border-radius: 20px; overflow: hidden; background: #fff; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.tl-card__text { padding: 32px 28px 20px; }
.tl-card__year { font-size: 16px; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0.05em; margin-bottom: 6px; }
.tl-card__title { font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.tl-card__desc { font-size: 16px; color: var(--color-text-secondary); margin-top: 10px; line-height: 1.6; }
.tl-card__img { flex: 1; min-height: 220px; overflow: hidden; }
.tl-card__img img { width: 100%; height: 100%; object-fit: cover; }
.tl-hscroll-arrows { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.tl-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-base); }
.tl-arrow:hover { background: var(--color-text); color: var(--color-bg); }

/* Founder */
.founder { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.founder__image { aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-secondary); }
.founder__image img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.contact-form label { font-size: 17px; display: block; margin-bottom: 5px; color: var(--color-text-secondary); }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 16px; background: var(--color-bg); color: var(--color-text); margin-bottom: 14px; transition: border-color 0.2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-primary); }
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form .submit-btn { display: block; width: 100%; text-align: center; padding: 12px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s; }
.contact-form .submit-btn:hover { background: var(--color-primary-hover); }
.contact-info-card { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; }
.contact-info-card__title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.contact-info-item { margin-bottom: 12px; }
.contact-info-item__label { font-size: 17px; color: var(--color-text-secondary); letter-spacing: 0.04em; margin-bottom: 2px; }
.contact-info-item__value { font-size: 17px; font-weight: 600; }

/* Contact Page — Apple Style */
.ct-hero { padding: 80px 0 48px; text-align: center; background: linear-gradient(180deg, #f5f5f7 0%, #fff 100%); }
.ct-hero__title { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-text); }
.ct-hero__sub { font-size: 17px; color: var(--color-text-secondary); margin-top: 16px; line-height: 1.7; }
.ct-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -20px; }
.ct-action-card { display: block; background: #fff; border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; color: var(--color-text); }
.ct-action-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.ct-action-card__icon { width: 56px; height: 56px; border-radius: 50%; background: #f5f5f7; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.ct-action-card--green .ct-action-card__icon { background: #e8f5e9; color: #2e7d32; }
.ct-action-card--blue .ct-action-card__icon { background: #e3f2fd; color: #1565c0; }
.ct-action-card__label { font-size: 16px; color: var(--color-text-secondary); letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; }
.ct-action-card__value { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.ct-action-card__hint { font-size: 16px; color: var(--color-text-secondary); }

.ct-info-block { margin-bottom: 28px; }
.ct-info-block__eyebrow { font-size: 16px; font-weight: 600; color: var(--color-primary); letter-spacing: 0.08em; margin-bottom: 8px; }
.ct-info-block__heading { font-size: 28px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; }
.ct-info-rows { display: flex; flex-direction: column; gap: 14px; }
.ct-info-row { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.ct-info-row__label { font-size: 16px; color: var(--color-text-secondary); font-weight: 600; letter-spacing: 0.04em; width: 50px; flex-shrink: 0; }
.ct-info-row__value { font-size: 17px; font-weight: 500; }

.ct-hours-block { margin-bottom: 28px; }
.ct-hours-grid { display: flex; flex-direction: column; gap: 10px; }
.ct-hours-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #fff; border-radius: 12px; }
.ct-hours-item__day { font-size: 16px; font-weight: 600; }
.ct-hours-item__time { font-size: 16px; color: var(--color-text-secondary); }
.ct-hours-item--highlight { background: var(--color-primary); color: #fff; }
.ct-hours-item--highlight .ct-hours-item__time { color: rgba(255,255,255,0.85); }

.ct-qr-block { display: flex; align-items: center; gap: 16px; padding: 20px; background: #fff; border-radius: 16px; }
.ct-qr-block__img { width: 80px; height: 80px; flex-shrink: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); }

.ct-map-wrap { border-radius: 20px; overflow: hidden; background: var(--color-bg-secondary); margin-bottom: 20px; }
.ct-map-wrap iframe { width: 100%; height: 350px; border: 0; display: block; }
.ct-photo-wrap { border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; }

.ct-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ct-feat-card { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; }
.ct-feat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.ct-feat-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary); }
.ct-feat-card__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.ct-feat-card__desc { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner { background: var(--color-dark-secondary); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; top: -40%; right: -15%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(232,99,10,0.15), transparent 70%); }
.cta-banner__title { font-size: 22px; font-weight: 600; color: #fff; position: relative; margin-bottom: 6px; }
.cta-banner__text { font-size: 16px; color: rgba(255,255,255,0.5); position: relative; margin-bottom: 16px; }

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 16px; }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb span { margin: 0 6px; }

/* ============================================
   PILL FILTER
   ============================================ */
.filter-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill { font-size: 14px; padding: 6px 16px; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); transition: var(--transition-base); white-space: nowrap; }
.filter-pill:hover { color: var(--color-text); border-color: var(--color-border-hover); }
.filter-pill--active { background: var(--color-text); color: var(--color-bg); border-color: transparent; }
.brand-group-title { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.brand-group-title:first-of-type { margin-top: 16px; }
.filter-sort select { font-size: 16px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); }

/* ============================================
   VIEW MORE LINK
   ============================================ */
.view-more { text-align: center; margin-top: 20px; }
.view-more a { font-size: 15px; color: var(--color-primary); font-weight: 500; }
.view-more a:hover { text-decoration: underline; }

/* ============================================
   PAGINATION
   ============================================ */
.page-numbers { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.page-numbers a, .page-numbers span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text-secondary); border: 1px solid var(--color-border); transition: var(--transition-base); }
.page-numbers a:hover { background: var(--color-bg-secondary); color: var(--color-text); }
.page-numbers .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-numbers .dots { border: none; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); padding: 20px 0; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.site-footer__copy { font-size: 13px; color: var(--color-text-secondary); }
.site-footer__links { display: flex; gap: 16px; }
.site-footer__link { font-size: 13px; color: var(--color-text-secondary); }
.site-footer__link:hover { color: var(--color-text); }

/* Floating action buttons */
.fab-group { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.fab { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: var(--transition-base); }
.fab:hover { background: var(--color-text); color: var(--color-bg); border-color: transparent; }

/* ============================================
   RELATED SECTION
   ============================================ */
.related-section { margin-top: 40px; }
.related-section__title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }

/* ============================================
   404
   ============================================ */
.page-404 { text-align: center; padding: 80px 0; }
.page-404__title { font-size: 64px; font-weight: 700; color: var(--color-primary); }
.page-404__text { font-size: 18px; color: var(--color-text-secondary); margin: 12px 0 24px; }

/* ============================================
   SERVICES PAGE (Apple Support style)
   ============================================ */
.svc-hero { text-align: center; padding: 56px 0 48px; }
.svc-hero__title { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; }
.svc-hero__subtitle { font-size: 16px; color: var(--color-text-secondary); margin-top: 8px; }
.svc-hero__grid { display: flex; gap: 20px; justify-content: center; margin-top: 36px; }
.svc-hero__item { flex: 0 0 200px; background: var(--color-bg-secondary); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid var(--color-border); }
.svc-hero__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.svc-hero__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.svc-hero__name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.svc-hero__desc { font-size: 16px; color: var(--color-text-secondary); }

.svc-section { padding: 20px 0; }

/* The unified card — image + text in one rounded container */
.svc-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-bg-secondary); border-radius: 28px; overflow: hidden; min-height: 420px; }
.svc-card--reverse { direction: rtl; }
.svc-card--reverse > * { direction: ltr; }

.svc-card__visual { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-bg-tertiary); }
.svc-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__placeholder { font-size: 18px; color: var(--color-text-tertiary); }

.svc-card__body { display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; }
.svc-card__eyebrow { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 8px; text-transform: uppercase; }
.svc-card__title { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; margin-bottom: 14px; }
.svc-card__text { font-size: 16px; color: var(--color-text-secondary); line-height: 1.8; margin-bottom: 24px; }
.svc-card__features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.svc-card__feat { padding-left: 14px; border-left: 2px solid var(--color-primary); }
.svc-card__feat-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.svc-card__feat-desc { font-size: 16px; color: var(--color-text-secondary); line-height: 1.5; }
.svc-card__link { font-size: 16px; color: var(--color-primary); font-weight: 500; }
.svc-card__link:hover { text-decoration: underline; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .hero__title { font-size: 28px; }
  .section__title { font-size: 24px; }
  .container { padding: 0 16px; }
}

/* ============================================
   MOBILE FIX v4.2
   ============================================ */

/* Navigation mobile fix */
@media (max-width: 768px) {
  .site-nav { height: auto; min-height: var(--nav-height); padding: 0; }
  .site-nav .container { flex-wrap: wrap; padding: 0 16px; min-height: var(--nav-height); }
  .site-nav__logo { padding: 12px 0; }
  .site-nav__menu { display: none !important; }
  .site-nav__mob-merch { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; color: var(--color-text-secondary); }
  .site-footer { display: none; }

  /* Bottom Tab Bar — floating pill */
  .mob-tab { display: flex; position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 200; background: rgba(255,255,255,0.40); backdrop-filter: saturate(200%) blur(28px); -webkit-backdrop-filter: saturate(200%) blur(28px); border-radius: 99px; padding: 8px 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); margin-bottom: env(safe-area-inset-bottom, 0px); border: 1px solid rgba(255,255,255,0.5); }
  .mob-tab__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; text-decoration: none; color: var(--color-text-secondary); font-size: 11px; font-weight: 500; transition: color 0.2s; -webkit-tap-highlight-color: transparent; }
  .mob-tab__item--active { color: var(--color-primary); }
  .mob-tab__item svg { width: 22px; height: 22px; }

  /* Bottom padding for floating tab bar */
  body { padding-bottom: 88px; }
  .fab-group { display: none; }

  /* Hero mobile — more prominent */
  .hero { padding: 36px 0 8px; background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%); }
  .hero__title { font-size: 32px; letter-spacing: -0.03em; }
  .hero__subtitle { font-size: 16px; margin-top: 6px; }
  .hero__cats { gap: 16px; margin-top: 24px; }
  .hero__cat-icon { width: 56px; height: 56px; font-size: 20px; background: var(--color-bg); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  .hero__cat-name { font-size: 17px; font-weight: 600; }

  /* Horizontal scroll — smooth & show 2+ cards */
  .hscroll-wrap { padding: 24px 0; }
  .hscroll-wrap__title { padding: 0 16px 12px; font-size: 22px; }
  .hscroll { gap: 12px; padding: 0 16px; scroll-snap-type: none; }
  .scroll-card { flex: 0 0 160px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
  .scroll-card__image { aspect-ratio: 1/1; }
  .scroll-card__body { padding: 10px 12px; }
  .scroll-card__name { font-size: 17px; }
  .scroll-card__tag { font-size: 17px; margin-bottom: 4px; }
  .scroll-card__spec { font-size: 17px; }
  .scroll-card__badge { font-size: 16px; padding: 2px 8px; }
  .scroll-card__model { font-size: 24px; }

  /* Equipment grid — better cards */
  .equip-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .equip-card { box-shadow: var(--shadow-card); border-radius: var(--radius-md); }
  .equip-card__body { padding: 10px 12px; }
  .equip-card__name { font-size: 17px; }
  .equip-card__meta { font-size: 16px; }
  .equip-card__specs { font-size: 17px; gap: 8px; }

  /* Merch grid */
  .merch-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .merch-card { box-shadow: var(--shadow-card); }
  .merch-card__body { padding: 10px 12px; }
  .merch-card__name { font-size: 17px; }

  /* Article grid — 1 column for readability */
  .article-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .article-card { display: grid; grid-template-columns: 120px 1fr; border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: none; }
  .article-card__image { aspect-ratio: 1/1; border-radius: var(--radius-md) 0 0 var(--radius-md); }
  .article-card__body { padding: 12px 14px; display: flex; align-items: center; min-width: 0; }
  .article-card__title { font-size: 15px; line-height: 1.4; }
  .article-card__time { font-size: 11px; padding: 2px 6px; }

  /* Section spacing */
  .section { padding: 36px 0; }
  .section__title { font-size: 24px; }
  .section__subtitle { font-size: 17px; margin-bottom: 20px; }
  .container { padding: 0 16px; }

  /* Detail pages */
  .equip-detail, .merch-detail { grid-template-columns: 1fr; gap: 20px; }
  .equip-detail__title, .merch-detail__title { font-size: 24px; }
  .about-intro, .founder { grid-template-columns: 1fr; gap: 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .ct-hero { padding: 48px 0 32px; }
  .ct-hero__title { font-size: 32px; }
  .ct-hero__sub { font-size: 17px; }
  .ct-hero__sub br { display: none; }
  .ct-actions { grid-template-columns: 1fr; gap: 12px; margin-top: -10px; }
  .ct-action-card { padding: 20px; display: flex; align-items: center; gap: 16px; text-align: left; }
  .ct-action-card__icon { margin: 0; width: 48px; height: 48px; flex-shrink: 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card__number { font-size: 24px; }

  /* Carousel */
  .carousel { border-radius: var(--radius-md); }
  .carousel__arrow { width: 28px; height: 28px; font-size: 16px; }
  .carousel__dot { width: 6px; height: 6px; }
  .carousel__thumb { width: 52px; height: 52px; border-radius: 8px; }

  /* Spec table */
  .spec-row { font-size: 16px; padding: 8px 0; }

  /* Footer */
  .site-footer .container { flex-direction: column; text-align: center; gap: 8px; }
  .site-footer__links { flex-wrap: wrap; justify-content: center; }

  /* Breadcrumb */
  .breadcrumb { font-size: 17px; }

  /* Filter bar */
  .filter-bar { flex-direction: column; align-items: flex-start; }
  .filter-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pill { flex-shrink: 0; }

  /* CTA banner — more impactful */
  .cta-banner { padding: 32px 20px; border-radius: var(--radius-lg); }
  .cta-banner__title { font-size: 20px; }
  .cta-banner__text { font-size: 17px; }

  /* Related */
  .related-section .equip-grid { grid-template-columns: repeat(2, 1fr); }

  /* Timeline */
  .tl-card { width: 320px; }
  .tl-card__img { min-height: 180px; }
  .tl-hscroll { padding: 0 16px; }

  /* View more link */
  .view-more { margin-top: 16px; }
  .view-more a { font-size: 15px; padding: 8px 20px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); display: inline-block; }

  /* Pagination mobile */
  .pagination-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pagination-wrap .page-numbers { white-space: nowrap; }

  /* Services page mobile */
  .svc-hero { padding: 36px 0 28px; background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%); }
  .svc-hero__title { font-size: 28px; }
  .svc-hero__grid { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 12px; padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .svc-hero__grid::-webkit-scrollbar { display: none; }
  .svc-hero__item { flex: 0 0 140px; padding: 20px 14px; border-radius: var(--radius-md); }
  .svc-hero__icon { width: 44px; height: 44px; margin: 0 auto 8px; }
  .svc-hero__icon svg { width: 24px; height: 24px; }
  .svc-hero__name { font-size: 17px; }
  .svc-section { padding: 16px 0; }
  .svc-card, .svc-card--reverse { grid-template-columns: 1fr; direction: ltr; border-radius: 20px; min-height: auto; }
  .svc-card__visual { min-height: 240px; }
  .svc-card__body { padding: 24px 20px; }
  .svc-card__title { font-size: 22px; }
  .svc-card__text { font-size: 17px; }
  .svc-card__features { gap: 10px; }
  .svc-card__link { font-size: 16px; padding: 10px 20px; background: var(--color-primary); color: #fff; border-radius: var(--radius-pill); display: inline-block; text-align: center; }
  .svc-card__link:hover { text-decoration: none; }

  /* FAQ mobile */
  .faq-item__question { padding: 12px 14px; font-size: 16px; }
  .faq-item__answer { padding: 0 14px 14px; font-size: 17px; }
}

/* ============================================
   v3.4 - MOBILE/TABLET/DESKTOP RULES
   ============================================ */

/* Tablet (769-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .equip-grid { grid-template-columns: repeat(3, 1fr); }
  .equip-detail, .merch-detail { gap: 24px; }
  .scroll-card { flex: 0 0 200px; }
  .container { padding: 0 20px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-actions { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ct-action-card { padding: 24px 16px; }
  .ct-action-card__value { font-size: 17px; }
  .svc-card__body { padding: 32px 28px; }
  .svc-card__title { font-size: 24px; }
  .ct-hero__title { font-size: 40px; }
}

/* ALL hscroll arrows hidden by default, carousel arrows visible */
.hscroll-arrow { display: none; }
.carousel__arrow { display: none; }

/* Show arrows on desktop */
@media (min-width: 769px) {
  .carousel__arrow { display: flex; }
}

/* Show hscroll arrows only on desktop with mouse */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .hscroll-arrow { display: flex; }
}

/* Touch scrolling for carousels */
.carousel__slides {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  touch-action: auto;
}

/* Desktop: hide scrollbar on hscroll but keep overflow for arrows */
@media (min-width: 1025px) {
  .hscroll { overflow: hidden; }
}