:root {
      --blue-950: #07111f; --blue-900: #0b1f3a; --blue-800: #123a66; --blue-700: #1857a4;
      --blue-600: #1e6fd9; --blue-500: #3b82f6; --blue-100: #e8f1fc; --blue-50: #f4f8fd;
      --gray-900: #0f172a; --gray-700: #334155; --gray-600: #475569; --gray-500: #64748b;
      --gray-300: #cbd5e1; --gray-200: #e2e8f0; --gray-100: #f1f5f9; --white: #ffffff;
      --accent: #38bdf8; --radius: 16px; --shadow: 0 8px 30px rgba(15,23,42,0.06);
      --shadow-md: 0 12px 40px rgba(15,23,42,0.1); --shadow-lg: 0 24px 60px rgba(15,23,42,0.14);
      --max: 1160px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--gray-900); background: var(--white); line-height: 1.55; -webkit-font-smoothing: antialiased; }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button, input, textarea { font: inherit; }

    picture { display: contents; }
    .pack-tile.text-tile { background: linear-gradient(160deg, #eff6ff, #fff); gap: 0.35rem; }
    .pack-tile.text-tile strong { font-size: 1.25rem; color: var(--blue-700); letter-spacing: -0.02em; }
    .pack-tile.text-tile small { font-size: 0.72rem; color: var(--gray-600); }
    .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: #fff; color: var(--blue-800); padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600; box-shadow: var(--shadow-md); }
    .skip-link:focus { top: 0.75rem; }
    a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #38bdf8; outline-offset: 2px; border-radius: 6px; }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
    .hero h1 .hero-eyebrow { display: block; line-height: 1.4; }
    .layer-title { margin: 0 0 0.25rem; }
    .layer-title .layer-num { display: block; }
    .layer-title .layer-word { display: block; font-size: 1.05rem; font-weight: 700; color: var(--blue-900); letter-spacing: normal; }
    .layer-card.compact .layer-title .layer-word { font-size: 0.95rem; }
    .line-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--blue-900); margin-bottom: 0.35rem; }
    .footer-col h2 { color: #fff; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }
    address { font-style: normal; }
    .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(226,232,240,0.9); }
    .header-inner { max-width: var(--max); margin: 0 auto; padding: 0.95rem 1.5rem; display: flex; align-items: center; gap: 1.75rem; }
    .logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
    .logo img { display: block; height: 40px; width: auto; }
    .nav { display: flex; align-items: center; gap: 1.4rem; flex: 1; font-size: 0.9rem; font-weight: 500; color: var(--gray-700); }
    .nav > a:hover { color: var(--blue-600); }
    .nav a.active { color: var(--blue-700); font-weight: 600; }
    .header-actions { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
    .link-quiet { font-size: 0.875rem; font-weight: 500; color: var(--gray-600); }
    .link-quiet:hover { color: var(--blue-600); }
    .nav-drop { position: relative; }
    .nav-drop > summary { list-style: none; cursor: pointer; font-weight: 500; color: var(--gray-600); display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; }
    .nav-drop > summary::-webkit-details-marker { display: none; }
    .nav-drop > summary::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.5; }
    .nav-drop[open] > summary { color: var(--blue-700); }
    .ir-panel { position: absolute; top: calc(100% + 0.75rem); right: 0; width: min(640px, 92vw); background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 1.1rem 1.2rem 1.2rem; z-index: 60; }
    .ir-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.8rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--gray-100); }
    .ir-panel-head strong { font-size: 0.85rem; color: var(--blue-900); }
    .ir-panel-head a { font-size: 0.8rem; font-weight: 600; color: var(--blue-600); }
    .ir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1rem; }
    .ir-grid a { display: block; padding: 0.42rem 0.4rem; border-radius: 8px; font-size: 0.84rem; color: var(--gray-700); }
    .ir-grid a:hover { background: var(--blue-50); color: var(--blue-700); }
    .ir-note { margin-top: 0.8rem; font-size: 0.72rem; color: var(--gray-500); line-height: 1.4; }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.72rem 1.35rem; border-radius: 10px; font-weight: 600; font-size: 0.92rem; border: 2px solid transparent; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary { background: var(--blue-600); color: var(--white); box-shadow: 0 8px 20px rgba(30,111,217,0.28); }
    .btn-primary:hover { background: var(--blue-700); }
    .btn-secondary { background: rgba(255,255,255,0.95); color: var(--blue-800); border-color: rgba(255,255,255,0.8); }
    .btn-secondary:hover { background: #fff; }
    .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
    .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
    .btn-whatsapp { background: #25d366; color: #0b3d1f; box-shadow: 0 8px 20px rgba(37,211,102,0.28); }
    .btn-whatsapp:hover { background: #1ebe57; }
    .btn-lg { padding: 0.85rem 1.55rem; font-size: 0.95rem; }
    .menu-toggle { display: none; background: none; border: 1px solid var(--gray-300); border-radius: 8px; padding: 0.4rem 0.55rem; cursor: pointer; color: var(--gray-700); }
    .menu-toggle svg { width: 22px; height: 22px; }

    .hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 55% at 78% 35%, rgba(56,189,248,0.22) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 15% 70%, rgba(30,111,217,0.25) 0%, transparent 50%), linear-gradient(165deg, #071525 0%, #0c2340 28%, #143a68 52%, #1e4a72 68%, #2d4560 85%, #3a4558 100%); color: var(--white); padding: 4rem 1.5rem 5rem; }
    .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,17,31,0.65) 0%, transparent 42%), repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(255,255,255,0.012) 100px, rgba(255,255,255,0.012) 101px); pointer-events: none; }
    .hero-skyline { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none; opacity: 0.55; }
    .hero-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.35fr; gap: 2rem 2.5rem; align-items: center; }
    .hero-eyebrow { display: inline-block; font-size: 0.78rem; line-height: 1.4; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7dd3fc; margin-bottom: 0.65rem; }
    .hero-tagline { display: inline-block; font-size: 0.95rem; font-weight: 600; color: #bae6fd; margin: -0.35rem 0 0.85rem; letter-spacing: 0.01em; }
    .hero h1 { font-size: clamp(2.35rem, 5vw, 3.35rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 1.15rem; }
    .hero h1 .line2 { color: #e0f2fe; }
    .hero-sub { font-size: 1.08rem; color: rgba(255,255,255,0.82); max-width: 30rem; margin-bottom: 1.65rem; line-height: 1.6; }
    .chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 2rem; }
    .chip { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: #e0f2fe; }
    .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
    .hero-certs { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.5rem; align-items: center; }
    .cert-pill { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.72rem; font-weight: 600; color: #e0f2fe; letter-spacing: 0.02em; }

    .hero-visual { display: flex; justify-content: center; align-items: center; position: relative; }
    .tank-stage { position: relative; width: min(100%, 720px); transform: translateX(3rem); }
    .hero-photo { position: relative; z-index: 1; }
    .hero-photo img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 28px 60px rgba(0,0,0,0.45); }
    .tank-glow { position: absolute; inset: 5% 5%; background: radial-gradient(circle at 50% 45%, rgba(125,211,252,0.35), transparent 65%); filter: blur(28px); pointer-events: none; }
    .tank-cutaway { position: relative; z-index: 1; }
    .tank-cutaway .tank-img { width: 58%; margin: 0 auto; position: relative; z-index: 1; filter: drop-shadow(0 28px 50px rgba(0,0,0,0.45)); }
    .tank-cutaway .tank-img img { width: 100%; height: auto; border-radius: 8px; }
    .cutaway-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
    .cutaway-svg text { font-family: Inter, system-ui, sans-serif; font-weight: 600; fill: #e0f2fe; }
    .cutaway-svg .muted { fill: #93c5fd; font-weight: 500; }
    .photo-credit { text-align: center; font-size: 0.7rem; color: rgba(255,255,255,0.68); margin-top: 0.85rem; position: relative; z-index: 1; }

    .section { padding: 5rem 1.5rem; }
    .section-inner { max-width: var(--max); margin: 0 auto; }
    .section-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 0.55rem; }
    .section h2 { font-size: clamp(1.65rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -0.03em; color: var(--blue-900); margin-bottom: 0.55rem; }
    .section-lead { color: var(--gray-600); max-width: 40rem; margin-bottom: 2.25rem; font-size: 1.02rem; }
    .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; }
    .section-head .section-lead { margin-bottom: 0; }
    .link-arrow { font-weight: 600; font-size: 0.92rem; color: var(--blue-600); display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; min-height: 44px; }
    .link-arrow:hover { color: var(--blue-800); }
    .range-meta { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 2rem; }
    .range-pill { background: var(--blue-50); border: 1px solid #dbeafe; color: var(--blue-800); font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 999px; }
    .range-pill strong { color: var(--blue-700); }

    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; display: flex; flex-direction: column; height: 100%; }
    .card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: #c7d7ee; }
    .card-visual { background: radial-gradient(ellipse at 50% 80%, rgba(30,111,217,0.08), transparent 60%), linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%); padding: 1.75rem 1.1rem 1.1rem; display: flex; align-items: center; justify-content: center; height: 340px; flex-shrink: 0; position: relative; }
    .card-visual img { width: auto; height: auto; max-width: 88%; max-height: 300px; object-fit: contain; object-position: center center; filter: drop-shadow(0 10px 20px rgba(15,23,42,0.12)); }
    .card-visual .cap-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; background: rgba(12,35,64,0.82); color: #e0f2fe; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.28rem 0.55rem; border-radius: 999px; }
    .card-body { padding: 1.35rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; gap: 0.55rem; border-top: 1px solid var(--gray-100); }
    .card-capacity { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; color: var(--blue-900); line-height: 1.15; }
    .card-body p { font-size: 0.9rem; color: var(--gray-600); flex: 1; line-height: 1.55; }
    .card-body .link-arrow { margin-top: 0.35rem; }

    .lines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
    .line-card { background: var(--blue-50); border: 1px solid #dbeafe; border-radius: 12px; padding: 1.15rem 1.2rem; }
    .line-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--blue-900); margin-bottom: 0.35rem; }
    .line-card p { font-size: 0.82rem; color: var(--gray-600); line-height: 1.45; }

    .tech { background: linear-gradient(180deg, var(--blue-50) 0%, #eef5fc 100%); }
    .tech-note { display: inline-flex; align-items: flex-start; gap: 0.55rem; background: #f8fafc; border: 1px solid var(--gray-200); color: var(--gray-600); font-size: 0.8rem; font-weight: 500; padding: 0.55rem 0.9rem; border-radius: 10px; margin-bottom: 2rem; max-width: 44rem; line-height: 1.45; }
    .tech-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; }
    .tech-layout .cutaway-panel { max-width: 420px; margin: 0 auto; width: 100%; }
    .cutaway-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.35rem 1.15rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; }
    .cutaway-panel h3 { font-size: 0.95rem; font-weight: 700; color: var(--blue-900); text-align: center; }
    .cutaway-panel .hint { font-size: 0.72rem; color: var(--gray-500); text-align: center; }
    .layer-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; }
    @media (max-width: 1100px) {
      .layer-cards { grid-template-columns: repeat(3, 1fr); }
    }
    .layer-card.compact { padding: 1.15rem 1rem 1.2rem; }
    .layer-card.compact .layer-num { font-size: 2.1rem; }
    .layer-card.compact h3 { font-size: 0.95rem; }
    .layer-card.compact .tier { font-size: 0.72rem; }
    .layer-card.compact p { font-size: 0.78rem; }
    .layer-card.compact .layer-list { font-size: 0.7rem; }
    .layer-refine { font-size: 0.75rem; color: var(--gray-500); margin-top: 1.25rem; max-width: 40rem; line-height: 1.45; }
    .layer-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.4rem 1.25rem 1.35rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
    .layer-card.featured { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-md); position: relative; }
    .layer-badge { position: absolute; top: -11px; right: 1rem; background: var(--blue-600); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0.22rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
    .layer-num { font-size: 2.6rem; font-weight: 800; color: var(--blue-600); letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.3rem; }
    .layer-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--blue-900); margin-bottom: 0.25rem; }
    .layer-card .tier { font-size: 0.8rem; font-weight: 600; color: var(--blue-600); margin-bottom: 0.55rem; }
    .layer-card p { font-size: 0.84rem; color: var(--gray-600); margin-bottom: 1rem; flex: 1; }
    .layer-list { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 1rem; line-height: 1.55; }
    .layer-list li { padding-left: 0.85rem; position: relative; }
    .layer-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-500); }
    /* Wall cross-section: bands side by side, left = outside (layer 1), right = inside / water (layer 6) */
    .wall-mini { margin-top: auto; }
    .layer-stack { display: flex; flex-direction: row; height: 22px; border: 1px solid #7f94b0; border-radius: 4px; overflow: hidden; background: #7f94b0; gap: 1px; }
    .layer-bar { flex: 1 1 0; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; line-height: 1; color: #0f2a4d; }
    .lb1 { background: #ffffff; } .lb2 { background: #3b82f6; color: #fff; } .lb3 { background: #e6edf6; }
    .lb4 { background: #1e4fb4; color: #fff; } .lb5 { background: #bcd6f4; } .lb6 { background: #ffffff; box-shadow: inset -3px 0 0 #7cc6ee; }
    .lb1::before { content: "1"; } .lb2::before { content: "2"; } .lb3::before { content: "3"; }
    .lb4::before { content: "4"; } .lb5::before { content: "5"; } .lb6::before { content: "6"; }
    .wall-caps { display: flex; justify-content: space-between; font-size: 0.62rem; font-weight: 600; color: var(--gray-500); margin-top: 0.25rem; letter-spacing: 0.02em; }
    .wall-diagram { width: 100%; max-width: 380px; height: auto; }
    .wall-strip { display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 380px; }
    .wall-strip .ws-bands { flex: 1; height: 28px; }
    .wall-strip .layer-bar { font-size: 0.72rem; }
    .ws-cap { font-size: 0.7rem; font-weight: 700; color: var(--blue-900); white-space: nowrap; }
    .ws-in { color: #0369a1; }

    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .why-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.65rem 1.5rem; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; height: 100%; }
    .why-item:hover { border-color: #c7d7ee; box-shadow: var(--shadow); transform: translateY(-2px); }
    .why-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(145deg, var(--blue-100), #dbeafe); color: var(--blue-700); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
    .why-icon svg { width: 22px; height: 22px; }
    .why-item h3 { font-size: 1.05rem; font-weight: 700; color: var(--blue-900); margin-bottom: 0.45rem; }
    .why-item p { font-size: 0.88rem; color: var(--gray-600); line-height: 1.55; }

    .certs-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; padding: 1.15rem 1.35rem; background: var(--blue-50); border: 1px solid #dbeafe; border-radius: 12px; }
    .certs-bar .cert { font-size: 0.85rem; font-weight: 700; color: var(--blue-900); }
    .certs-bar .cert span { display: block; font-size: 0.75rem; font-weight: 500; color: var(--gray-600); margin-top: 0.15rem; }
    .certs-bar .sep { width: 1px; height: 36px; background: #bfdbfe; }

    .direct-cta { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 80% at 90% 20%, rgba(56,189,248,0.18), transparent 50%), radial-gradient(ellipse 40% 60% at 10% 80%, rgba(30,111,217,0.25), transparent 45%), linear-gradient(135deg, #071525 0%, #0c2340 40%, #123a66 75%, #154a8a 100%); color: var(--white); padding: 4.5rem 1.5rem; }
    .direct-cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255,255,255,0.015) 80px, rgba(255,255,255,0.015) 81px); pointer-events: none; }
    .direct-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem; align-items: stretch; }
    .direct-cta h2 { font-size: clamp(1.7rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.75rem; color: #fff; }
    .direct-cta .lead { color: rgba(255,255,255,0.8); margin-bottom: 1.75rem; max-width: 28rem; font-size: 1.02rem; line-height: 1.6; }
    .direct-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
    .enquire-form { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: 1.75rem; backdrop-filter: blur(8px); box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
    .enquire-form h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.15rem; color: #e0f2fe; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 0.8rem; }
    .enquire-form input, .enquire-form textarea { width: 100%; padding: 0.8rem 0.95rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.96); color: var(--gray-900); font-size: 0.9rem; }
    .enquire-form textarea { resize: vertical; min-height: 90px; margin-bottom: 0.8rem; }
    .enquire-form input::placeholder, .enquire-form textarea::placeholder { color: var(--gray-500); }
    .form-hint { font-size: 0.75rem; color: rgba(255,255,255,0.72); margin-top: 0.75rem; }

    .packaging { background: var(--gray-100); }
    .pack-grid { display: grid; grid-template-columns: 1.2fr 0.95fr; gap: 2.5rem; align-items: center; }
    .pack-visual { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; min-height: 320px; }
    .pack-tile { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; padding: 1.25rem; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; transition: box-shadow 0.2s, transform 0.2s; overflow: hidden; }
    .pack-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .pack-tile.hero-tile { grid-row: 1 / -1; padding: 1.75rem; background: linear-gradient(165deg, #fff 0%, #f0f7ff 100%); }
    .pack-tile img { width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(15,23,42,0.1)); }
    .pack-tile.hero-tile img { max-height: 240px; }
    .pack-tile:not(.hero-tile) img { max-height: 100px; }
    .pack-tile span { font-size: 0.85rem; font-weight: 700; color: var(--blue-900); }
    .pack-copy h2 { margin-bottom: 0.85rem; }
    .pack-copy p { color: var(--gray-600); margin-bottom: 1.75rem; max-width: 28rem; font-size: 1.02rem; line-height: 1.6; }

    .value-bar { background: var(--blue-900); color: rgba(255,255,255,0.9); padding: 1.85rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .value-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; text-align: center; }
    .value-item { font-size: 0.82rem; font-weight: 600; line-height: 1.35; padding: 0.25rem; }
    .value-item::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin: 0 auto 0.55rem; }

    .site-footer { background: var(--blue-950); color: rgba(255,255,255,0.7); padding: 2.75rem 1.5rem 1.75rem; font-size: 0.875rem; }
    .footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 0.9fr 1.3fr; gap: 2.25rem; margin-bottom: 2.25rem; }
    .footer-brand .logo { margin-bottom: 0.85rem; }
    .footer-brand p { max-width: 22rem; line-height: 1.65; }
    .footer-col h4 { color: #fff; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }
    .footer-col a { display: block; padding: 0.42rem 0; color: rgba(255,255,255,0.7); }
    .footer-col a:hover { color: #fff; }
    .footer-ir { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    .footer-ir a { font-size: 0.8rem; }
    .footer-bottom { max-width: var(--max); margin: 0 auto; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
    .footer-legal { max-width: 52rem; }
    .footer-fine { font-size: 0.75rem; color: rgba(255,255,255,0.66); max-width: 52rem; line-height: 1.5; }

    @media (max-width: 1020px) {
      .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .hero-visual { order: -1; }
      .tank-stage { width: 100%; margin: 0 auto; transform: none; }
      .tech-layout { grid-template-columns: 1fr; }
      .cards, .layer-cards, .why-grid { grid-template-columns: 1fr 1fr; }
      .lines-grid { grid-template-columns: 1fr 1fr; }
      .direct-inner, .pack-grid { grid-template-columns: 1fr; }
      .value-inner { grid-template-columns: repeat(3, 1fr); }
      .footer-inner { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 720px) {
      .nav { display: none; }
      .nav.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--gray-200); padding: 1rem 1.25rem 1.25rem; gap: 0.85rem; box-shadow: var(--shadow); }
      .nav.open .nav-drop { width: 100%; display: block; }
      .nav.open .ir-panel { position: static; width: 100%; box-shadow: none; border: 1px solid var(--gray-200); margin-top: 0.5rem; }
      .menu-toggle { display: flex; margin-left: auto; }
      .site-header .logo img { height: 32px; }
      .header-inner { gap: 0.75rem; }
      .header-inner { flex-wrap: wrap; position: relative; }
      .header-actions .link-quiet, .header-actions > .nav-drop { display: none; }
      .cards, .layer-cards, .why-grid, .lines-grid { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .value-inner { grid-template-columns: 1fr 1fr; }
      .footer-inner { grid-template-columns: 1fr; }
      .pack-visual { grid-template-columns: 1fr 1fr; min-height: 0; }
      .pack-tile.hero-tile { grid-row: auto; grid-column: 1 / -1; }
      .footer-ir { grid-template-columns: 1fr; }
      .section { padding: 3.5rem 1.25rem; }
      .hero { padding: 2.75rem 1.25rem 3.5rem; }
      .card-visual { height: 280px; }
      .cutaway-svg .co-labels, .cutaway-svg .co-leaders { display: none; }
      .certs-bar .sep { display: none; }
    }
    @media (max-width: 420px) {
      .site-header .logo img { height: 27px; }
      .header-inner { gap: 0.6rem; }
    }
    @media (max-width: 370px) {
      .site-header .logo img { height: 24px; }
    }
    @media (max-width: 400px) {
      .value-inner { grid-template-columns: 1fr; }
      .pack-visual { grid-template-columns: 1fr; }
    }

/* ===== inner pages (extends homepage design system) ===== */
.nav .has-sub{position:relative}
.page-hero{background:radial-gradient(ellipse 60% 80% at 90% 20%,rgba(56,189,248,.18),transparent 50%),linear-gradient(135deg,#071525 0%,#0c2340 45%,#143a68 100%);color:#fff;padding:2.6rem 1.5rem 2.4rem}
.page-hero .inner{max-width:var(--max);margin:0 auto}
.page-hero h1{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:.35rem 0 .5rem}
.page-hero p.lead{color:rgba(255,255,255,.82);max-width:46rem}
.page-hero .eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7dd3fc}
.crumbs{font-size:.8rem;color:rgba(255,255,255,.72);display:flex;flex-wrap:wrap;gap:.3rem}
.crumbs a{color:#bae6fd}.crumbs a:hover{text-decoration:underline}
.crumbs span.sep{opacity:.5}
.wrap{max-width:var(--max);margin:0 auto;padding:2.5rem 1.5rem 4rem}
.with-side{display:grid;grid-template-columns:260px minmax(0,1fr);gap:2.25rem;align-items:start}
.side{position:sticky;top:84px;background:var(--blue-50);border:1px solid #dbeafe;border-radius:14px;padding:1rem;font-size:.85rem;max-height:calc(100vh - 100px);overflow:auto}
.side h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-700);margin:0 0 .5rem}
.side a{display:block;padding:.32rem .5rem;border-radius:7px;color:var(--gray-700)}
.side a:hover{background:#fff;color:var(--blue-700)}
.side a.cur{background:var(--blue-600);color:#fff;font-weight:600}
.side .sub{margin-left:.7rem;border-left:2px solid #dbeafe;padding-left:.35rem}
.prose{color:var(--gray-700);font-size:.95rem;line-height:1.65;overflow-wrap:anywhere}
.prose p{margin:0 0 .8rem}.prose h2,.prose h3{color:var(--blue-900);margin:1.4rem 0 .6rem;line-height:1.25}
.prose h2{font-size:1.35rem}.prose h3{font-size:1.1rem}
.prose ul,.prose ol{margin:0 0 1rem 1.3rem}.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose a{color:var(--blue-600);text-decoration:underline}
.prose img{height:auto;margin:.5rem 0;border:1px solid var(--gray-200);border-radius:8px}
.tbl{overflow-x:auto;margin:0 0 1.2rem;border:1px solid var(--gray-200);border-radius:10px}
.tbl table{border-collapse:collapse;width:100%;font-size:.85rem;min-width:420px}
.tbl th,.tbl td{border:1px solid var(--gray-200);padding:.45rem .6rem;text-align:left;vertical-align:top}
.tbl th{background:var(--blue-50);color:var(--blue-900)}
.tbl td p{margin:0}
.doclist{display:grid;gap:.6rem;margin:0 0 1.5rem}
.doc{display:flex;gap:.8rem;align-items:center;background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:.75rem .9rem;box-shadow:var(--shadow);text-decoration:none!important;color:var(--gray-900)!important}
.doc:hover{border-color:var(--blue-500)}
.doc .ic{flex:0 0 40px;height:46px;border-radius:7px;background:#fee2e2;color:#b91c1c;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.doc .ic.docx{background:#dbeafe;color:#1d4ed8}
.doc .nm{font-weight:600;font-size:.9rem;word-break:break-word}
.doc .mt{font-size:.75rem;color:var(--gray-500)}
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem;margin:0 0 1.75rem}
.kid{display:block;background:#fff;border:1px solid var(--gray-200);border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.kid:hover{border-color:var(--blue-500);transform:translateY(-2px)}
.kid strong{display:block;color:var(--blue-900);font-size:1rem}
.kid span{font-size:.78rem;color:var(--gray-500)}
.yr{border:1px solid var(--gray-200);border-radius:14px;padding:1rem 1.1rem;margin:0 0 1rem;background:#fff}
.yr h3{font-size:1rem;color:var(--blue-900);margin:0 0 .6rem}.yr h3 a{color:inherit}
.yr .doclist{margin:0}
.yr .item{margin:.25rem 0 .7rem}.yr .item>a.il{font-weight:600;color:var(--blue-700);font-size:.88rem}
.meta{font-size:.78rem;color:var(--gray-500);margin:0 0 1rem}
.empty{background:var(--gray-100);border-radius:10px;padding:.9rem 1rem;color:var(--gray-600);font-size:.88rem}
.note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:.7rem .9rem;font-size:.8rem;margin:0 0 1.2rem}
.spec{margin:1rem 0 1.5rem}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-bottom:2rem}
.prod-photo{background:linear-gradient(180deg,#f8fafc,#eef4fb);border:1px solid var(--gray-200);border-radius:16px;padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.prod-photo img{max-height:360px;width:auto;object-fit:contain;border-radius:8px}
.prod-photo figcaption,.fig-cap{font-size:.72rem;color:var(--gray-500);text-align:center}
.cat-fig{max-width:420px;margin:1rem 0}.cat-fig img{border:1px solid var(--gray-200);border-radius:10px}
.cta-box{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;background:var(--blue-900);color:#fff;border-radius:16px;padding:1.25rem 1.4rem;margin:2rem 0 0}
.cta-box p{flex:1 1 260px;margin:0;color:rgba(255,255,255,.85)}
.btn-outline{border-color:var(--blue-600);color:var(--blue-700);background:#fff}
.layer-svg{width:100%;max-width:220px;height:auto;margin:.4rem auto 0}
.facts{display:grid;grid-template-columns:200px 1fr;gap:.1rem 1rem;font-size:.9rem;margin:0 0 1.5rem}
.facts dt{font-weight:600;color:var(--blue-900);padding:.4rem 0;border-bottom:1px solid var(--gray-100)}
.facts dd{padding:.4rem 0;border-bottom:1px solid var(--gray-100);color:var(--gray-700)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--gray-200);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.pcard .pv{height:220px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f8fafc,#eef4fb);padding:1rem}
.pcard .pv img{max-height:190px;width:auto;object-fit:contain}
.pcard .pb{padding:1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.pcard h3{font-size:1.05rem;color:var(--blue-900)}.pcard p{font-size:.86rem;color:var(--gray-600);flex:1}
.sitemap-list ul{list-style:disc;margin:.2rem 0 .2rem 1.2rem}.sitemap-list li{margin:.15rem 0;font-size:.88rem}
@media (max-width:1020px){.with-side{grid-template-columns:1fr}.with-side>.side{order:2}.side{position:static;max-height:none}.card-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.prod-grid,.card-grid{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.facts dt{border:0;padding-bottom:0}.wrap{padding:1.75rem 1.15rem 3rem}.page-hero{padding:2rem 1.15rem}}