/* samilsam — page theme (moved out of the blade). Base reset/.reveal/.home-btn in company-base.css */
:root {
        --ink: #14241c;
        --ink-2: #3a4a40;
        --muted: #67746b;
        --green: #1f7a4d;
        --green-deep: #16543a;
        --green-soft: #edf4ef;
        --amber: #f4b81f;
        --amber-deep: #cf9400;
        --amber-soft: #fdf3da;
        --charcoal: #18211d;
        --paper: #ffffff;
        --mist: #f3f7f4;
        --cream: #f8f6ef;
        --line: rgba(20, 36, 28, 0.12);
        --shadow: 0 26px 64px rgba(20, 40, 28, 0.16);
        --shadow-sm: 0 14px 34px rgba(20, 40, 28, 0.1);
        --r: 18px;
        --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        --mono: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper);
        font-family: var(--sans); line-height: 1.62; -webkit-font-smoothing: antialiased;
      }
      body.menu-open { overflow: hidden; }
      a { color: inherit; text-decoration: none; }
      img { display: block; max-width: 100%; }
      h1, h2, h3, p { margin-top: 0; }
      .container { width: min(1240px, calc(100% - 44px)); margin: 0 auto; }

      h1, h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; color: var(--ink); }
      h1 { font-size: clamp(38px, 5vw, 70px); margin-bottom: 22px; }
      h2 { font-size: clamp(28px, 3.6vw, 50px); margin-bottom: 16px; }
      h1 em, h2 em { font-style: normal; color: var(--green); }
      .mono { font-family: var(--mono); }

      .eyebrow {
        display: inline-flex; align-items: center; gap: 10px; color: var(--green);
        font-size: 11px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 18px;
      }
      .eyebrow::before { width: 24px; height: 3px; background: var(--amber); content: ""; border-radius: 2px; }
      .eyebrow.light { color: #fff; }
      .eyebrow.amber { color: var(--amber-deep); }

      .button {
        display: inline-flex; min-height: 52px; padding: 0 24px; align-items: center; justify-content: center;
        gap: 11px; border: 1.5px solid transparent; border-radius: 10px; background: var(--green); color: #fff;
        font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: 0.5px;
        text-transform: uppercase; cursor: pointer; transition: 220ms ease;
      }
      .button:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(31, 122, 77, 0.3); }
      .button.amber { background: var(--amber); color: var(--ink); }
      .button.amber:hover { box-shadow: 0 16px 28px rgba(244, 184, 31, 0.4); }
      .button.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
      .button.ghost:hover { border-color: var(--green); color: var(--green); box-shadow: none; }
      .button.light { background: #fff; color: var(--ink); }
      .arrow { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, 0.22); font-size: 13px; }
      .ghost .arrow, .amber .arrow, .light .arrow { background: var(--green-soft); color: var(--green); }

      section { padding: clamp(70px, 9vw, 112px) 0; }
      .body-copy { max-width: 640px; color: var(--ink-2); font-size: 16px; }
      .section-head { max-width: 720px; margin-bottom: 48px; }
      .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
      .section-head p { margin: 0; color: var(--muted); font-size: 16px; }

      /* NAV */
      .topbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
      nav { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 22px; }
      .brand { display: flex; align-items: center; gap: 12px; }
      .brand .mark { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--green); color: #fff; font-weight: 900; font-size: 15px; letter-spacing: -0.5px; }
      .brand .mark::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--amber); top: 6px; right: 6px; }
      .brand b { font-weight: 900; font-size: 17px; letter-spacing: 0.5px; color: var(--ink); }
      .brand b span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
      .nav-links { display: flex; align-items: center; gap: 24px; }
      .nav-links > a:not(.button) { color: var(--ink-2); font-size: 12.5px; font-weight: 700; transition: color 0.2s; }
      .nav-links > a:not(.button):hover { color: var(--green); }
      .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; font-size: 18px; }

      /* HERO */
      .hero { position: relative; overflow: hidden; background:
          radial-gradient(circle at 86% 30%, rgba(244, 184, 31, 0.2), transparent 32%),
          radial-gradient(circle at 12% 88%, rgba(31, 122, 77, 0.14), transparent 34%),
          linear-gradient(180deg, #ffffff, #f1f6f2); }
      .hero-grid { display: grid; gap: 52px; align-items: center; grid-template-columns: 1.05fr 0.95fr; padding: clamp(44px, 6vw, 80px) 0 clamp(56px, 6vw, 90px); }
      .hero-copy { max-width: 580px; margin-bottom: 30px; color: var(--ink-2); font-size: 17px; }
      .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
      .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 50px; }
      .hero-stat { padding: 0 16px; border-left: 1px solid var(--line); }
      .hero-stat:first-child { padding-left: 0; border-left: 0; }
      .hero-stat strong { display: block; font-family: var(--mono); font-weight: 700; color: var(--green); font-size: 27px; line-height: 1; }
      .hero-stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
      .hero-visual { position: relative; min-height: 480px; display: grid; place-items: center; }
      .hero-stage { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; border-radius: 26px; background: radial-gradient(circle at 50% 38%, #233029, #18211d); box-shadow: var(--shadow); display: grid; place-items: center; overflow: hidden; }
      .hero-stage::before { content: ""; position: absolute; width: 78%; height: 78%; border-radius: 50%; background: radial-gradient(circle, rgba(244, 184, 31, 0.28), transparent 68%); }
      .hero-stage img { position: relative; width: 74%; height: 88%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); }
      .hero-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 13px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-sm); }
      .hero-chip.tl { top: 14px; left: -6px; }
      .hero-chip.br { bottom: 16px; right: -8px; }
      .hero-chip .ic { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: 15px; }
      .hero-chip.br .ic { background: var(--amber-soft); color: var(--amber-deep); }
      .hero-chip b { display: block; font-size: 13px; color: var(--ink); }
      .hero-chip span { display: block; font-size: 10.5px; color: var(--muted); }

      /* MARKETS */
      .markets { background: var(--charcoal); color: rgba(255, 255, 255, 0.74); padding: 30px 0; }
      .markets .container { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
      .markets-label { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--amber); }
      .markets-list { display: flex; flex-wrap: wrap; gap: 9px 10px; justify-content: center; }
      .markets-list span { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.88); }

      /* ABOUT */
      .about { background: var(--paper); }
      .about-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 60px; align-items: center; }
      .about-media { position: relative; }
      .about-media .main { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); }
      .about-media .badge { position: absolute; left: -14px; bottom: -14px; background: var(--amber); color: var(--ink); padding: 16px 20px; border-radius: 14px; box-shadow: var(--shadow-sm); }
      .about-media .badge b { display: block; font-family: var(--mono); font-size: 26px; line-height: 1; }
      .about-media .badge span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
      .about-points { display: grid; gap: 12px; margin-top: 28px; }
      .about-point { display: flex; gap: 14px; align-items: flex-start; }
      .about-point .ic { flex: 0 0 auto; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 18px; }
      .about-point b { display: block; font-size: 15px; color: var(--ink); }
      .about-point span { font-size: 13.5px; color: var(--muted); }

      /* PRODUCT LINES */
      .lines { background: var(--mist); }
      .lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
      .line-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); transition: 240ms ease; }
      .line-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
      .line-card .pic { aspect-ratio: 16 / 11; background: var(--cream); overflow: hidden; }
      .line-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
      .line-card:hover .pic img { transform: scale(1.05); }
      .line-card .pad { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
      .line-card .tag { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 8px; }
      .line-card h3 { font-size: 19px; font-weight: 800; margin: 0 0 9px; color: var(--ink); }
      .line-card p { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; }
      .line-card .more { margin-top: auto; font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 7px; }

      /* FEATURES */
      .features { background: var(--paper); }
      .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .feat { padding: 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: 0.22s; }
      .feat:hover { border-color: var(--green); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
      .feat .n { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--amber-deep); }
      .feat h3 { font-size: 16.5px; font-weight: 800; margin: 12px 0 8px; color: var(--ink); }
      .feat p { font-size: 13.5px; color: var(--muted); margin: 0; }

      /* SPEC / MODELS (dark) */
      .specs { background: var(--charcoal); color: #fff; }
      .specs .eyebrow { color: var(--amber); }
      .specs h2 { color: #fff; }
      .specs .section-head p { color: rgba(255, 255, 255, 0.6); }
      .model-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
      .model-chip { padding: 11px 16px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
      .model-chip b { font-family: var(--mono); font-size: 14px; color: var(--amber); }
      .model-chip span { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
      .spec-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14); -webkit-overflow-scrolling: touch; }
      .spec-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
      .spec-table th, .spec-table td { padding: 13px 16px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.07); }
      .spec-table thead th { background: rgba(255, 255, 255, 0.06); font-family: var(--mono); font-size: 13px; color: var(--amber); letter-spacing: 0.5px; }
      .spec-table tbody th { text-align: left; font-weight: 700; color: rgba(255, 255, 255, 0.9); white-space: nowrap; background: rgba(255, 255, 255, 0.03); }
      .spec-table td { color: rgba(255, 255, 255, 0.82); font-family: var(--mono); font-size: 12.5px; }
      .spec-table tbody tr:hover td, .spec-table tbody tr:hover th { background: rgba(244, 184, 31, 0.07); }
      .spec-hint { display: none; margin-bottom: 12px; font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
      .spec-foot { margin-top: 16px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }

      /* ============ BEST FOGGER CONFIGURATOR (replaces wide-scroll spec table) ============ */
      .cfg { margin-top: 8px; }

      /* Segmented model selector */
      .cfg-tabs {
        display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px;
        padding: 6px; border-radius: 16px;
        background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
      }
      .cfg-tab {
        flex: 1 1 140px; display: flex; flex-direction: column; gap: 3px;
        padding: 12px 16px; text-align: left; cursor: pointer;
        border: 1px solid transparent; border-radius: 11px;
        background: transparent; color: #fff;
        transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
      }
      .cfg-tab .code { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .5px; color: rgba(255,255,255,.92); transition: color .22s ease; }
      .cfg-tab .role { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); line-height: 1.3; }
      .cfg-tab:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); }
      .cfg-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
      .cfg-tab[aria-selected="true"] {
        background: var(--amber); border-color: var(--amber);
        box-shadow: 0 14px 30px rgba(244,184,31,.28);
      }
      .cfg-tab[aria-selected="true"] .code { color: var(--charcoal); }
      .cfg-tab[aria-selected="true"] .role { color: rgba(24,33,29,.72); }

      /* Panel shell */
      .cfg-panel {
        display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 26px;
        border-radius: 22px; border: 1px solid rgba(255,255,255,.12);
        background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
        overflow: hidden;
      }
      .cfg-panel.swapping .cfg-stage img,
      .cfg-panel.swapping .cfg-detail { animation: cfgIn .42s cubic-bezier(.22,.61,.36,1) both; }
      @keyframes cfgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

      /* Image stage — light/blueprint so the white-bg technical renders sit cleanly */
      .cfg-stage {
        position: relative; padding: 30px; min-height: 320px;
        display: grid; place-items: center;
        background:
          radial-gradient(circle at 50% 34%, rgba(244,184,31,.10), transparent 60%),
          linear-gradient(180deg, #f5f7f6, #e9efeb);
        background-color: #eef2ef;
      }
      .cfg-stage::before {
        content: ""; position: absolute; inset: 16px; border-radius: 14px;
        background-image: linear-gradient(rgba(20,36,28,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,36,28,.05) 1px, transparent 1px);
        background-size: 26px 26px; pointer-events: none;
      }
      .cfg-stage img { position: relative; width: 100%; max-width: 460px; height: auto; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(20,40,28,.22)); }
      .cfg-stage .stage-tag {
        position: absolute; top: 16px; left: 16px; z-index: 2;
        display: inline-flex; align-items: center; gap: 7px;
        padding: 6px 12px; border-radius: 8px; background: var(--charcoal); color: #fff;
        font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .5px;
      }
      .cfg-stage .stage-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

      /* Detail side */
      .cfg-detail { padding: 28px 30px; display: flex; flex-direction: column; gap: 20px; }
      .cfg-pos {
        display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
        font-size: 12px; font-weight: 700; color: var(--charcoal);
        padding: 6px 13px; border-radius: 40px; background: var(--amber);
      }

      /* Hero stat tiles */
      .cfg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .cfg-stat {
        padding: 16px 16px 15px; border-radius: 14px;
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      }
      .cfg-stat .label { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.55); }
      .cfg-stat .val { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
      .cfg-stat .num { font-family: var(--mono); font-size: 34px; font-weight: 700; line-height: .9; color: #fff; }
      .cfg-stat .unit { font-family: var(--mono); font-size: 13px; font-weight: 700; color: rgba(255,255,255,.6); }
      .cfg-stat.is-power { background: rgba(244,184,31,.1); border-color: rgba(244,184,31,.34); }
      .cfg-stat.is-power .num { color: var(--amber); }
      .cfg-stat.is-power .unit { color: var(--amber-deep); }
      .cfg-stat.is-tank .num { color: #7fd6a6; }
      .cfg-stat .bar { margin-top: 11px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
      .cfg-stat .bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--amber-deep), var(--amber)); transition: width .7s cubic-bezier(.22,.61,.36,1); }
      .cfg-stat .meta { margin-top: 9px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.45); }
      .num-pop { animation: numPop .5s ease both; }
      @keyframes numPop { 0% { transform: translateY(6px); opacity: .2; } 100% { transform: none; opacity: 1; } }

      /* Badges row */
      .cfg-badges { display: flex; flex-wrap: wrap; gap: 8px; }
      .cfg-badge {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 8px 12px; border-radius: 9px;
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
        font-size: 12px; color: rgba(255,255,255,.88);
      }
      .cfg-badge b { font-weight: 700; }
      .cfg-badge small { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.45); }
      .cfg-badge .dot { width: 8px; height: 8px; border-radius: 3px; background: var(--green); }
      .cfg-badge.amber .dot { background: var(--amber); }

      /* Secondary key/value specs */
      .cfg-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 2px; }
      .cfg-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
      .cfg-row span { font-size: 12.5px; color: rgba(255,255,255,.6); }
      .cfg-row b { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.92); text-align: right; }

      /* Compare toggle + collapsible table */
      .cfg-compare-bar { margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
      .cfg-compare-btn {
        display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
        min-height: 46px; padding: 0 20px; border-radius: 10px;
        background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #fff;
        font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
        transition: background .2s ease, border-color .2s ease, transform .2s ease;
      }
      .cfg-compare-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(244,184,31,.5); transform: translateY(-2px); }
      .cfg-compare-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
      .cfg-compare-btn .chev { transition: transform .3s ease; font-size: 14px; color: var(--amber); }
      .cfg-compare-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
      .cfg-compare-note { font-size: 12px; color: rgba(255,255,255,.45); }

      .cfg-compare { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s ease; }
      .cfg-compare > .inner { overflow: hidden; min-height: 0; }
      .cfg-compare[data-open="true"] { grid-template-rows: 1fr; }
      .cfg-compare .scroll { margin-top: 20px; overflow-x: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); -webkit-overflow-scrolling: touch; }
      .cmp-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
      .cmp-table th, .cmp-table td { padding: 12px 15px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.07); }
      .cmp-table thead th { background: rgba(255,255,255,.06); font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,.8); letter-spacing: .5px; cursor: pointer; transition: color .2s ease, background .2s ease; }
      .cmp-table thead th:hover { color: var(--amber); }
      .cmp-table tbody th { text-align: left; font-weight: 700; color: rgba(255,255,255,.9); white-space: nowrap; background: rgba(255,255,255,.03); }
      .cmp-table td { color: rgba(255,255,255,.82); font-family: var(--mono); font-size: 12.5px; }
      .cmp-table .col-active { background: rgba(244,184,31,.09); }
      .cmp-table thead th.col-active { color: var(--amber); background: rgba(244,184,31,.14); }
      .cmp-hint { display: none; margin: 14px 0 0; font-size: 11.5px; color: rgba(255,255,255,.5); }
      .cfg-foot { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.5); }

      @media (max-width: 900px) {
        .cfg-panel { grid-template-columns: 1fr; }
        .cfg-stage { min-height: 240px; padding: 24px; }
        .cfg-detail { padding: 24px; }
      }
      @media (max-width: 560px) {
        .cfg-tab { flex: 1 1 100%; }
        .cfg-rows { grid-template-columns: 1fr; }
        .cfg-stat .num { font-size: 30px; }
        .cmp-hint { display: block; }
      }
      @media (prefers-reduced-motion: reduce) {
        .cfg-panel.swapping .cfg-stage img,
        .cfg-panel.swapping .cfg-detail,
        .num-pop { animation: none; }
        .cfg-stat .bar i { transition: none; }
        .cfg-compare { transition: none; }
        .cfg-tab, .cfg-compare-btn { transition: none; }
      }

      /* BIRD GEL band */
      .birdband { background: var(--green); color: #fff; position: relative; overflow: hidden; }
      .birdband::before { content: ""; position: absolute; top: -120px; left: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 184, 31, 0.22), transparent 70%); }
      .bird-grid { position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px; align-items: center; }
      .birdband h2 { color: #fff; }
      .birdband .eyebrow { color: var(--amber); }
      .birdband p { color: rgba(255, 255, 255, 0.85); font-size: 16px; }
      .bird-feats { display: grid; gap: 12px; margin-top: 22px; }
      .bird-feat { display: flex; gap: 13px; align-items: flex-start; }
      .bird-feat .ic { flex: 0 0 auto; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.14); color: var(--amber); font-size: 17px; }
      .bird-feat b { display: block; font-size: 14.5px; }
      .bird-feat span { font-size: 13px; color: rgba(255, 255, 255, 0.78); }
      .bird-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .bird-media figure { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(10, 40, 24, 0.35); }
      .bird-media img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
      .bird-media figure:nth-child(2) { transform: translateY(18px); }

      /* APPLICATIONS */
      .apps { background: var(--mist); }
      .apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
      .app { display: flex; gap: 14px; align-items: center; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
      .app .ic { flex: 0 0 auto; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: var(--amber-soft); color: var(--amber-deep); font-size: 21px; }
      .app b { display: block; font-size: 15px; color: var(--ink); }
      .app span { font-size: 12.5px; color: var(--muted); }

      /* CERT */
      .certs { background: var(--paper); }
      .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
      .cert { padding: 26px 22px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; }
      .cert .ic { font-size: 26px; margin-bottom: 12px; }
      .cert b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 5px; }
      .cert span { font-size: 12px; color: var(--muted); }

      /* PRICING */
      .pricing { background: var(--cream); }
      .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
      .price-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); }
      .price-card.feature { border-color: var(--green); box-shadow: var(--shadow); }
      .price-card .top { padding: 24px 24px 0; }
      .price-card .tag { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--amber-deep); }
      .price-card h3 { font-size: 18px; font-weight: 800; margin: 8px 0 4px; color: var(--ink); }
      .price-card .sub { font-size: 12.5px; color: var(--muted); }
      .price-card .amt { padding: 16px 24px; }
      .price-card .amt b { font-family: var(--mono); font-size: 26px; color: var(--green); }
      .price-card .amt small { font-size: 12px; color: var(--muted); font-weight: 600; }
      .price-card ul { list-style: none; margin: 0; padding: 0 24px 24px; }
      .price-card li { font-size: 13px; color: var(--ink-2); padding: 7px 0 7px 24px; position: relative; }
      .price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
      .price-note { margin-top: 22px; color: var(--muted); font-size: 12.5px; max-width: 760px; }

      /* CONTACT */
      .contact { background: linear-gradient(180deg, #f3f7f4, #ffffff); padding-bottom: 56px; }
      .contact-card { display: grid; grid-template-columns: 1.05fr 0.95fr; overflow: hidden; border-radius: 26px; background: var(--charcoal); color: #fff; box-shadow: var(--shadow); }
      .contact-main { padding: 54px; }
      .contact-main .eyebrow { color: var(--amber); }
      .contact-main h2 { color: #fff; }
      .contact-main p { color: rgba(255, 255, 255, 0.78); max-width: 440px; margin-bottom: 26px; }
      .contact-detail { padding: 46px; background: rgba(31, 122, 77, 0.16); display: grid; align-content: start; gap: 18px; }
      .cline { padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
      .cline:last-child { padding-bottom: 0; border-bottom: 0; }
      .cline small { display: block; color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; }
      .cline span, .cline a { display: block; color: rgba(255, 255, 255, 0.9); font-size: 13.5px; }
      .cline a:hover { color: var(--amber); }
      footer.foot { display: flex; justify-content: space-between; gap: 14px; padding-top: 28px; color: var(--muted); font-size: 12.5px; }

      .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
      .reveal.visible { opacity: 1; transform: none; }
      .home-btn { position: fixed; left: 18px; bottom: 18px; z-index: 9999; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); font-size: 0.82rem; font-weight: 700; padding: 11px 20px; border-radius: 40px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35); border: 1px solid rgba(0, 0, 0, 0.06); }

      @media (max-width: 1024px) {
        .hero-grid, .about-grid, .bird-grid, .contact-card { grid-template-columns: 1fr; }
        .lines-grid, .feat-grid, .apps-grid, .price-grid { grid-template-columns: repeat(2, 1fr); }
        .cert-grid { grid-template-columns: repeat(2, 1fr); }
        .about-media { max-width: 520px; }
        .hero-stats { margin-top: 38px; }
      }
      @media (max-width: 760px) {
        .nav-links { position: fixed; inset: 0 0 0 26%; z-index: 60; padding: 92px 30px; flex-direction: column; align-items: stretch; gap: 18px; background: rgba(255, 255, 255, 0.98); transform: translateX(100%); transition: transform 0.25s ease; }
        .menu-open .nav-links { transform: none; }
        .menu-toggle { display: block; z-index: 61; }
        .lines-grid, .feat-grid, .apps-grid, .price-grid { grid-template-columns: 1fr; }
        .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
        .hero-stat:nth-child(3) { padding-left: 0; border-left: 0; }
        .spec-hint { display: block; }
        .contact-main, .contact-detail { padding: 34px 26px; }
        footer.foot { flex-direction: column; }
        .bird-media figure:nth-child(2) { transform: none; }
      }
      @media (max-width: 480px) {
        .cert-grid { grid-template-columns: 1fr; }
      }