* {
        box-sizing: border-box;
      }
      html {
        font-family: var(--font-primary, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
      }
      body {
        margin: 0;
        font-family: var(--font-primary, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
        color: #183129;
        background: #fbfcf8;
        line-height: 1.55;
      }
      button,
      input,
      select,
      textarea {
        font-family: inherit;
      }
      .wrap {
        width: min(1180px, calc(100% - 48px));
        margin: auto;
      }
      
      
      .brand {
        font-size: 23px;
        font-weight: 700;
        color: #9bdd6e;
        text-decoration: none;
      }
      .brand small {
        display: block;
        font-size: 7px;
        letter-spacing: 0.15em;
        color: #d5e5d2;
      }
      .navlinks {
        display: flex;
        gap: 20px;
        margin-left: auto;
      }
      .navlinks a {
        font-size: 11px;
        text-decoration: none;
        color: #e5eee7;
      }
      .cta {
        background: #8ee36d !important;
        color: #102a20 !important;
        padding: 10px 18px;
        border-radius: 24px;
      }
      .hero {
        background: linear-gradient(120deg, #0d2e27, #173f34);
        color: #fff;
        padding: 58px 0 50px;
      }
      .kicker {
        font-size: 10px;
        letter-spacing: 0.18em;
        color: #9fd37b;
        text-transform: uppercase;
      }
      .hero h1 {
        font-family: var(--font-primary);
        font-weight: 600;
        font-size: clamp(40px, 5vw, 66px);
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin: 10px 0 18px;
      }
      .hero p {
        max-width: 760px;
        color: #d8e5dc;
        font-size: 16px;
      }
      .catalog,
      .demo {
        padding: 48px 0;
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      .card {
        padding: 22px;
        background: #fff;
        border: 1px solid #dce4d8;
        border-radius: 5px;
        text-decoration: none;
      }
      .card > span {
        font-size: 9px;
        color: #4e8b61;
      }
      .card h3 {
        font-size: 21px;
        margin: 5px 0;
      }
      .card p {
        font-size: 12px;
        color: #68766b;
      }
      .card b {
        font-size: 10px;
        color: #36764e;
      }
      .tabs {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin: 20px 0;
      }
      .tabs button {
        border: 1px solid #dce4d8;
        background: #fff;
        padding: 10px 16px;
        border-radius: 4px;
        cursor: pointer;
      }
      .tabs button.active {
        background: #173c31;
        color: #fff;
      }
      .grid {
        display: grid;
        grid-template-columns: 1.8fr 0.9fr;
        gap: 22px;
      }
      .visual {
        min-height: 430px;
        background: linear-gradient(145deg, #244a3c, #0e2822);
        border-radius: 6px;
        color: #fff;
        padding: 35px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .visual .symbol {
        display: none;
      }
      .solution-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.72;
      }
      .visual {
        position: relative;
      }
      .visual:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          0deg,
          rgba(5, 24, 18, 0.9),
          rgba(5, 24, 18, 0.05) 70%
        );
      }
      .visual > *:not(.solution-photo) {
        position: relative;
        z-index: 2;
      }
      .visual h2 {
        font-size: 34px;
        margin: 0;
      }
      .visual p {
        color: #dce9df;
      }
      .panel {
        border: 1px solid #dce4d8;
        background: #fff;
        border-radius: 6px;
        padding: 17px;
      }
      .devices {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
      }
      .device {
        min-height: 80px;
        background: #f5f7f1;
        border: 1px solid #e2e7dd;
        padding: 9px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .device b {
        font-size: 9px;
      }
      .device span {
        font-size: 10px;
        color: #327149;
      }
      .explain {
        border-top: 1px solid #dce4d8;
        margin-top: 12px;
        padding-top: 12px;
      }
      .explain h3 {
        font-size: 20px;
        margin: 0 0 5px;
      }
      .explain p {
        font-size: 11px;
        color: #68766b;
      }
      .note {
        margin-top: 16px;
        padding: 12px;
        border-left: 3px solid #83a86b;
        background: #f3f6ef;
        font-size: 10px;
        color: #68766b;
      }
      footer {
        background: #0a2922;
        color: #dce8df;
        padding: 28px 0;
        margin-top: 45px;
      }
      @media (max-width: 850px) {
        .navlinks {
          display: none;
        }
        .grid,
        .cards {
          grid-template-columns: 1fr;
        }
      }

.solution-photo {
        display: none !important;
      }
      .solution-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
      .visual > *:not(.solution-svg) {
        position: relative;
        z-index: 2;
      }
      .visual:after {
        z-index: 1;
      }
      .gate-left,
      .gate-right,
      .window,
      .cage-door {
        transform-box: fill-box;
        transform-origin: center;
      }
      .poolwaves path,
      .sound path,
      .flow,
      .spray path,
      .laser path {
        animation: dash 2s linear infinite;
      }
      .waterfall {
        animation: water 1.2s ease-in-out infinite alternate;
      }
      .rgb circle,
      .warning,
      .alert {
        animation: pulse2 1s ease-in-out infinite alternate;
      }
      .rain {
        animation: rain 1.2s linear infinite;
      }
      .speaker {
        animation: pulse2 0.8s ease-in-out infinite alternate;
      }
      @keyframes dash {
        to {
          stroke-dashoffset: -48;
        }
      }
      @keyframes water {
        to {
          opacity: 0.45;
        }
      }
      @keyframes pulse2 {
        to {
          opacity: 0.35;
        }
      }
      @keyframes rain {
        to {
          transform: translateY(35px);
        }
      }
      .visual[data-state="1"] .gate-left {
        transform: translateX(-95px);
      }
      .visual[data-state="1"] .gate-right {
        transform: translateX(95px);
      }
      .visual[data-state="1"] .window {
        transform: rotate(-12deg);
      }
      .visual[data-state="2"] .cage-door {
        transform: rotateY(65deg);
      }
      .visual[data-state="0"] .alert,
      .visual[data-state="0"] .warning,
      .visual[data-state="0"] .laser,
      .visual[data-state="0"] .spray,
      .visual[data-state="0"] .sound {
        opacity: 0.15;
      }
      .visual[data-state="2"] .rgb {
        filter: hue-rotate(80deg);
      }
      .anim,
      .window,
      .cage-door {
        transition: transform 1.2s ease;
      }
      @media (prefers-reduced-motion: reduce) {
        .solution-svg * {
          animation: none !important;
        }
      }

:root {
        --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --serif: var(--font-primary);
        --sans: var(--font-primary);
        --forest: #173b32;
        --green: #356a48;
        --ink: #213d34;
        --paper: #f8f8f2;
        --line: #dfe5db;
      }

.visual {
        background: #e6eee9 !important;
        position: relative !important;
        overflow: hidden !important;
      }
      .visual .recognizable {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
      .visual .symbol {
        display: none !important;
      }
      .visual:after {
        background: linear-gradient(
          0deg,
          rgba(9, 34, 24, 0.73),
          transparent 46%
        ) !important;
        pointer-events: none;
      }
      .visual h2,
      .visual p {
        position: relative;
        z-index: 3;
      }
      .recognizable .effect {
        opacity: 0;
        transition: opacity 0.55s;
      }
      .visual[data-state="0"] .on0,
      .visual[data-state="1"] .on1,
      .visual[data-state="2"] .on2,
      .visual[data-state="3"] .on3 {
        opacity: 1;
      }
      .gate-left,
      .gate-right,
      .window,
      .cage-door {
        transition: transform 1s;
        transform-box: fill-box;
        transform-origin: center;
      }
      .visual[data-state="1"] .gate-left {
        transform: translateX(-90px);
      }
      .visual[data-state="1"] .gate-right {
        transform: translateX(90px);
      }
      .visual[data-state="0"] .window {
        transform: rotate(-12deg);
      }
      .visual[data-state="2"] .cage-door {
        transform: translateX(100px);
      }
      .visual .recognizable {
        pointer-events: none;
      }
      .visual h2 {
        font-size: 27px !important;
      }
      .visual p {
        font-size: 14px !important;
      }
      @media (prefers-reduced-motion: reduce) {
        .recognizable * {
          animation: none !important;
        }
      }

.gate-demo {
        background: #f8f8f2;
        color: #213d34;
        padding: 42px 0 60px;
      }
      .gate-intro {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        align-items: end;
        margin-bottom: 22px;
      }
      .gate-intro h2 {
        font-family: var(--font-primary);
        font-size: 36px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.025em;
        margin: 8px 0;
      }
      .gate-intro > p {
        font-size: 13px;
        color: #62776a;
        max-width: 420px;
      }
      .gate-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.8fr) minmax(310px, 0.85fr);
        gap: 16px;
      }
      .gate-visual {
        position: relative;
        border-radius: 7px;
        overflow: hidden;
        border: 1px solid #dbe5dc;
        background: #dcebe6;
      }
      .gate-visual svg {
        width: 100%;
        height: auto;
        display: block;
      }
      .gate-caption {
        font-size: 11px;
        padding: 8px 15px;
        background: #eaf0e9;
        color: #557264;
      }
      .gate-controls {
        background: #fff;
        border: 1px solid #dce5db;
        border-radius: 7px;
        padding: 19px;
      }
      .gate-controls h3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 18px;
      }
      .status-pill {
        font-size: 11px;
        padding: 6px 10px;
        background: #e7f0e9;
        color: #1e6044;
        border-radius: 30px;
      }
      .gate-action-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 15px 0;
      }
      .gate-action-grid button {
        background: #f3f7f1;
        border: 1px solid #d5e4d8;
        border-radius: 7px;
        min-height: 110px;
        color: #183c31;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
      }
      .gate-action-grid button:hover {
        border-color: #548467;
        background: #e9f4e9;
      }
      .gate-action-grid small {
        font-size: 10px;
        color: #698174;
      }
      .action-icon {
        font-size: 30px;
      }
      .gate-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 0;
        border-top: 1px solid #e5ebe3;
        font-size: 12px;
      }
      .gate-row strong {
        text-align: right;
        color: #246348;
      }
      .gate-countdown {
        background: #f0f5ef;
        border-radius: 6px;
        padding: 13px;
        margin: 12px 0;
      }
      .gate-count-head {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
      }
      .gate-track {
        height: 7px;
        background: #d8e6d9;
        border-radius: 10px;
        overflow: hidden;
        margin: 9px 0;
      }
      .gate-track span {
        display: block;
        width: 0;
        height: 100%;
        background: #4c9875;
        transition: width 0.2s linear;
      }
      .gate-countdown small {
        font-size: 10px;
        color: #718477;
      }
      .gate-close {
        width: 100%;
        padding: 11px;
        background: #173b32;
        color: #fff;
        border: 0;
        border-radius: 4px;
        cursor: pointer;
      }
      .gate-feedback {
        font-size: 11px;
        color: #597064;
        min-height: 35px;
      }
      .gate-benefits {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 18px;
      }
      .gate-benefits > div {
        background: #fff;
        border: 1px solid #dce5db;
        padding: 17px;
        border-radius: 6px;
      }
      .gate-benefits b {
        font-size: 13px;
      }
      .gate-benefits p {
        font-size: 11px;
        color: #61766a;
      }
      .gate-caution {
        font-size: 10px;
        color: #718578;
        margin-top: 20px;
      }
      .gate-panel {
        transition: transform 2s ease-in-out;
      }
      .gate-visual[data-open="true"] .gate-panel {
        transform: translateX(-690px);
      }
      .gate-visual[data-open="true"] #gate-car {
        opacity: 1;
      }
      @media (max-width: 900px) {
        .gate-grid {
          grid-template-columns: 1fr;
        }
        .gate-benefits {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 600px) {
        .gate-intro {
          display: block;
        }
        .gate-benefits {
          grid-template-columns: 1fr;
        }
        .gate-demo {
          padding-top: 25px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .gate-panel {
          transition: none;
        }
      }

.gate-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
      }
      .gate-device-control {
        min-width: 0;
        border: 1px solid #d9e4dc;
        border-radius: 9px;
        background: linear-gradient(180deg, #fff, #f3f7f1);
        padding: 14px 10px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
      }
      .gate-device-icon {
        width: 68px;
        height: 80px;
        display: block;
        flex-shrink: 0;
      }
      .gate-device-control b {
        font-size: 13px;
        color: #173b32;
        line-height: 1.25;
      }
      .gate-device-control small {
        font-size: 10px;
        color: #62796b;
        min-height: 28px;
        line-height: 1.4;
      }
      .gate-command-pair {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        width: 100%;
        margin-top: auto;
      }
      .gate-command-pair button {
        min-height: 38px;
        border-radius: 5px;
        border: 1px solid #1c4d3b;
        background: #1c4d3b;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 8px 4px;
        cursor: pointer;
      }
      .gate-command-pair button:nth-child(2) {
        background: #fff;
        color: #1c4d3b;
      }
      .gate-command-pair button:focus-visible {
        outline: 3px solid #78b998;
        outline-offset: 2px;
      }
      @media (min-width: 1150px) {
        .gate-device-control {
          padding: 17px 12px;
        }
        .gate-device-icon {
          width: 75px;
          height: 88px;
        }
      }