/* Gongly 2026 visual system — design-reference implementation */
:root {
  --bg-primary: #fff;
  --bg-secondary: #f5f9ff;
  --bg-tertiary: #eaf3ff;
  --bg-dark: #10283d;
  --bg-dark-card: #17344d;
  --text-primary: #101820;
  --text-secondary: #536273;
  --text-muted: #778699;
  --green-primary: #0868d7;
  --green-hover: #0058bd;
  --green-light: #eaf4ff;
  --green-glow: rgba(8,104,215,.22);
  --border-color: #dce8f5;
  --border-dark: rgba(255,255,255,.12);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 4px 14px rgba(24,76,125,.07);
  --shadow-md: 0 14px 36px rgba(24,76,125,.11);
  --shadow-lg: 0 24px 64px rgba(13,50,85,.16);
  --shadow-glow: 0 10px 30px rgba(8,104,215,.24);
  --container-width: 1320px;
}

html { scroll-behavior: smooth; }
body { font-size: 15px; background: #fff; }
body::selection { background: #cfe5ff; color: #073b75; }
.container { padding-inline: clamp(20px,4vw,44px); }
.section-padding { padding: clamp(64px,8vw,104px) 0; }
h1,h2,h3,h4 { letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem,3vw,2.5rem); }

/* Header from reference: bright, compact and conversion focused */
.announcement-bar { display: none; }
header { background: rgba(255,255,255,.94); border-bottom: 1px solid #e8eff7; box-shadow: 0 2px 12px rgba(18,62,105,.04); }
.nav-container { height: 80px; }
.logo-icon { width: 148px; height: 38px; }
.nav-menu { gap: clamp(18px,2.4vw,34px); }
.nav-link { color: #162331; opacity: 1; font-size: 13px; font-weight: 650; }
.nav-link::after { height: 2px; bottom: -8px; background: #0a6bdb; }
.nav-link:hover,.nav-link.active { color: #0868d7; }
.btn,.btn-nav-quote { border-radius: 7px; font-weight: 700; }
.btn { min-height: 46px; padding: 13px 25px; }
.btn-green,.btn-primary { background: linear-gradient(135deg,#0874e8,#005abe); color:#fff; box-shadow: 0 7px 18px rgba(0,94,199,.18); }
.btn-green:hover,.btn-primary:hover { background: linear-gradient(135deg,#0766ce,#004ea7); box-shadow: var(--shadow-glow); }
.btn-secondary,.btn-outline { background: rgba(255,255,255,.92); color:#0868d7; border:1px solid #9fc7f1; }
.dropdown-menu { border-color:#d9e6f3; box-shadow:var(--shadow-lg); }
.mega-icon,.mega-card-link,.all-products-link { color:#0874e8; }

/* Ice-field page hero language */
.home-hero,.page-hero {
  background-color:#edf7ff;
  background-image: linear-gradient(90deg,rgba(245,250,255,.98) 0%,rgba(241,248,255,.92) 38%,rgba(232,244,255,.44) 66%,rgba(225,240,253,.16) 100%), radial-gradient(circle at 80% 20%,#fff 0,#dceeff 52%,#bad8f3 100%);
  border-bottom:1px solid #d7e8f8;
}
.home-hero { min-height: 650px; padding: 105px 0 36px; }
.home-hero-main { min-height: 430px; }
.home-hero-text { max-width: 610px; }
.home-hero h1 { font-size:clamp(2.65rem,5.4vw,4.7rem); line-height:1.05; margin-bottom:22px; }
.home-hero h1 strong,.accent-blue { color:#0870df; }
.home-hero p { max-width:610px; color:#364b5f; font-size:clamp(1rem,1.5vw,1.16rem); }
.redesign-hero-visual { position:relative; align-self:stretch; min-height:430px; display:flex; align-items:flex-end; justify-content:center; isolation:isolate; }
.redesign-hero-visual::after { content:""; position:absolute; z-index:-1; left:3%; right:0; bottom:1%; height:24%; background:radial-gradient(ellipse,rgba(76,140,194,.25),transparent 68%); filter:blur(14px); }
.ice-halo { position:absolute; z-index:-2; inset:5% -10% 0 -12%; border-radius:50%; background:radial-gradient(circle at 54% 48%,rgba(255,255,255,.95),rgba(189,222,249,.54) 45%,transparent 69%); }
.hero-machine { position:absolute; bottom:0; object-fit:contain; filter:drop-shadow(0 24px 22px rgba(24,61,91,.23)); }
.hero-machine-main { width:68%; max-height:410px; left:2%; z-index:2; }
.hero-machine-side { width:48%; max-height:385px; right:-4%; z-index:3; mix-blend-mode:multiply; }
.catalog-hero { padding-block:90px 38px !important; }
.catalog-hero .home-hero-main { display:grid; }
.about-reference-hero { background-image:linear-gradient(90deg,rgba(245,250,255,.98) 0%,rgba(242,249,255,.86) 42%,rgba(238,247,255,.28) 70%),url('../public/home%20hero%20banner%20new%2001.webp') !important; background-position:center !important; }
.badge { color:#076bd9; background:#e8f3ff; border-color:#bddbfa; }
.hero-bullets-container { margin-top:38px; }
.hero-bullets-grid { gap:12px; }
.bullet-card.bullet-glass-card { padding:18px; border-radius:9px; border:1px solid rgba(178,210,240,.8); background:rgba(255,255,255,.72); box-shadow:0 8px 24px rgba(28,90,145,.06); }
.bullet-card.bullet-glass-card .bullet-icon-box { color:#0870df; background:#f7fbff; }

/* Common section rhythm and cards */
.category-header-row,.faq-section-header { align-items:center; }
.category-header-row h2,.text-center h2 { position:relative; padding-bottom:14px; }
.category-header-row h2::after,.text-center h2::after { content:""; position:absolute; width:44px; height:3px; border-radius:4px; background:#1680ee; bottom:0; left:0; }
.text-center h2::after { left:50%; transform:translateX(-50%); }
.category-card,.product-card,.value-card,.impact-card,.contact-form-card,.contact-method-card,.download-item-card,.faq-item,.bento-card {
  border:1px solid #dae7f4;
  box-shadow:0 5px 20px rgba(19,77,128,.06);
  border-radius:10px;
}
.category-card:hover,.product-card:hover,.value-card:hover,.impact-card:hover,.contact-method-card:hover,.download-item-card:hover {
  transform:translateY(-6px); border-color:#9dc8f2; box-shadow:0 16px 34px rgba(21,89,151,.13);
}
.category-img,.product-img-wrapper { background:linear-gradient(145deg,#fafdff,#edf6ff); }
.category-arrow,.product-btn,.btn-link { color:#086ddc; }
.product-card { padding:18px; }
.product-title { font-size:16px; }
.product-tag.new { background:#63c735; }
.features-bar,.stats-section { background:linear-gradient(135deg,#eef7ff,#f9fcff); }
.icon-box,.feature-icon-box,.value-icon-box,.impact-icon-box,.method-icon-box { color:#0870df; background:#eaf4ff; border-color:#cfe4fa; }

/* Product listing: clean category catalogue from reference */
.products-layout { gap:28px; }
.products-sidebar { border:1px solid #dce8f5; border-radius:10px; background:#f8fbff; }
.filter-tab-btn.active { color:#0868d7; border-color:#0868d7; background:#edf6ff; }
.pagination .active,.page-num-btn.active { background:#0868d7; color:#fff; }

/* Product detail */
.detail-grid { gap:clamp(34px,5vw,72px); align-items:center; }
.detail-gallery-box,.detail-info-box { border-radius:12px; }
.detail-gallery-box { background:linear-gradient(145deg,#f7fbff,#e8f4ff); border:1px solid #d8e9f8; }
.detail-title { font-size:clamp(2rem,4vw,3.7rem); line-height:1.08; }
.product-detail-page{background:#fff}
.product-detail-hero{background:#fff;border-bottom:1px solid #edf0f3}
.product-detail-hero .detail-gallery-box,.product-detail-hero .detail-info-box{background:#fff;backdrop-filter:none}
.product-detail-page>.section-padding,.product-detail-page>.stats-section,.product-detail-page .product-detail-industries{background-color:#fff!important;background-image:none!important}
.product-detail-industries .ref-industry-icon img{width:30px;height:30px;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:768px){.product-detail-hero .detail-gallery-box,.product-detail-hero .detail-info-box{background:#fff}.product-detail-industries .ref-industry-image{height:240px}}
.purchase-actions-box { background:#f3f8fd; border-color:#d7e7f5; }
.specs-table { border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
.specs-table tr:nth-child(odd) { background:#f1f7fd; }
.detail-trust-item span,.stock-indicator { color:#0870df; }

/* About / contact / support-like content */
.contact-hero { background-image:linear-gradient(90deg,rgba(245,250,255,.97),rgba(237,247,255,.68)),url('../public/home%20hero%20banner%20new%2001.webp') !important; }
.contact-grid,.about-mission-grid,.factory-grid,.tech-split-grid { gap:clamp(28px,5vw,64px); }
input,select,textarea { border-color:#ceddea !important; border-radius:6px !important; background:#fff !important; min-height:46px; }
input:focus,select:focus,textarea:focus { border-color:#0870df !important; box-shadow:0 0 0 3px rgba(8,112,223,.12) !important; }
.cta-banner { background:linear-gradient(90deg,rgba(225,241,255,.97),rgba(246,251,255,.86)),url('../images/hero_home.svg'); color:#12283a; border-block:1px solid #cfe2f4; }

/* Footer */
footer { background:linear-gradient(135deg,#10283d,#0b1f32); }
.footer-top { padding-top:64px; padding-bottom:46px; }
.footer-brand p,.footer-links a,.footer-copy { color:#b9c8d6; }
.footer-links-col h4 { color:#fff; }
.footer-social-btn { border-color:rgba(255,255,255,.2); color:#d6e6f5; }
.footer-social-btn:hover { background:#0870df; border-color:#0870df; }

/* Floating conversion rail matching the supplied layouts */
.gongly-quick-rail { position:fixed; right:12px; top:46%; z-index:80; display:grid; background:rgba(255,255,255,.96); border:1px solid #d8e6f4; border-radius:8px; box-shadow:0 8px 26px rgba(22,73,119,.14); overflow:hidden; }
.gongly-quick-rail a,.gongly-quick-rail button { width:54px; min-height:54px; display:grid; place-items:center; color:#176dc8; font-size:10px; border-bottom:1px solid #e5edf6; background:transparent; }
.gongly-quick-rail svg { width:19px; height:19px; }

@media (max-width:1023px) {
  .nav-container { height:70px; }
  .home-hero { padding-top:80px; }
  .home-hero-main { grid-template-columns:1fr; }
  .redesign-hero-visual { min-height:360px; margin-top:16px; }
  .hero-bullets-grid { grid-template-columns:repeat(2,1fr); }
  .gongly-quick-rail { display:none; }
  .grid-5-cols { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px) {
  body { font-size:16px; }
  .container { padding-inline:18px; }
  .section-padding { padding:56px 0; }
  .logo-icon { width:120px; height:32px; }
  .home-hero { min-height:auto; padding:24px 0 24px !important; background-image:linear-gradient(180deg,rgba(242,249,255,.98),rgba(226,241,255,.96)),radial-gradient(circle at 50% 36%,#fff,#cfe6fa 72%) !important; background-position:center !important; }
  .home-hero-text { align-self:start; padding-top:4px; }
  .about-reference-hero { background-image:linear-gradient(180deg,rgba(245,250,255,.93),rgba(229,242,253,.9)),url('../public/home%20hero%20banner%20new%2001.webp') !important; }
  .contact-hero { background-image:linear-gradient(180deg,rgba(245,250,255,.94),rgba(229,242,253,.92)),url('../public/home%20hero%20banner%20new%2001.webp') !important; }
  .home-hero h1 { font-size:clamp(2.35rem,11vw,3.35rem); }
  .redesign-hero-visual { min-height:285px; }
  .hero-machine-main { width:66%; }
  .hero-machine-side { width:47%; right:0; }
  .home-hero p { font-size:1rem; }
  .home-hero-btns { flex-direction:column; }
  .home-hero-btns .btn { width:100%; }
  .home-hero-trust { align-items:flex-start; }
  .hero-bullets-container { margin-top:36px; }
  .hero-bullets-grid { grid-template-columns:1fr; }
  .bullet-card.bullet-glass-card { min-height:88px; }
  .category-header-row { align-items:flex-start; gap:18px; }
  .category-slider-controls { display:none; }
  .grid-4-cols,.grid-5-cols,.features-bar-grid,.values-grid { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .detail-title { font-size:2.25rem; }
  .purchase-btns { display:grid; grid-template-columns:1fr; }
  .purchase-btns>* { width:100%; min-height:48px; }
  .footer-top { grid-template-columns:1fr; }
  .footer-links-col h4 { min-height:44px; display:flex; align-items:center; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
