:root{
      --bg:#f7f1e6;
      --bg-2:#efe2d0;
      --bg-3:#fbf7ef;
      --card:#fffdf8;
      --main:#d8a85f;
      --main-dark:#b87b3f;
      --sub:#c98758;
      --brown:#4d3a2f;
      --text:#3f342c;
      --muted:#75685f;
      --line:#e2d2be;
      --white:#fff;
      --shadow: 0 18px 42px rgba(77,58,47,.12);
      --shadow-soft: 0 10px 24px rgba(77,58,47,.09);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 16px;
      --container: 1120px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(216,168,95,.25), transparent 32rem),
        radial-gradient(circle at 95% 10%, rgba(201,135,88,.18), transparent 28rem),
        var(--bg);
      line-height:1.75;
      letter-spacing:.02em;
    }
    img,svg{max-width:100%;height:auto;display:block}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    .container{width:min(calc(100% - 32px), var(--container));margin-inline:auto}
    .section{padding:72px 0}
    .section--compact{padding:48px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:.5rem;
      color:var(--main-dark);font-weight:800;font-size:.86rem;
      letter-spacing:.08em;text-transform:uppercase;
      margin-bottom:10px;
    }
    .eyebrow::before{content:"";width:32px;height:2px;background:var(--main);border-radius:999px}
    h1,h2,h3{line-height:1.32;margin:0;color:var(--brown);letter-spacing:.01em}
    h1{font-size:clamp(2rem, 6.2vw, 4.2rem)}
    h2{font-size:clamp(1.7rem, 4.6vw, 2.8rem)}
    h3{font-size:1.18rem}
    p{margin:0;color:var(--muted)}
    .lead{font-size:clamp(1rem,2.4vw,1.18rem);color:var(--text)}
    .small{font-size:.88rem;color:var(--muted)}
    .center{text-align:center}
    .stack{display:grid;gap:20px}
    .grid{display:grid;gap:20px}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}

    .site-header{
      position:sticky;top:0;z-index:50;
      backdrop-filter:blur(14px);
      background:rgba(247,241,230,.83);
      border-bottom:1px solid rgba(226,210,190,.7);
    }
    .header-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--brown);white-space:nowrap}
    .brand-mark{
      width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--main),var(--sub));
      display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-soft);
    }
    .brand-mark svg{width:25px;height:25px}
    .nav{display:none;align-items:center;gap:18px;font-size:.92rem;font-weight:700;color:var(--brown)}
    .nav a{opacity:.8}.nav a:hover{opacity:1;color:var(--main-dark)}
    .header-contact{display:none;gap:10px;align-items:center}

    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      min-height:48px;padding:12px 20px;border-radius:999px;border:1px solid transparent;
      background:var(--brown);color:#fff;font-weight:800;box-shadow:var(--shadow-soft);
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(77,58,47,.18)}
    .btn:focus-visible{outline:3px solid rgba(216,168,95,.45);outline-offset:3px}
    .btn--main{background:linear-gradient(135deg,var(--main),var(--sub));color:#fff}
    .btn--ghost{background:rgba(255,253,248,.7);color:var(--brown);border-color:var(--line);box-shadow:none}
    .btn--line{background:transparent;color:var(--brown);border-color:var(--line);box-shadow:none}
    .btn--small{min-height:40px;padding:9px 15px;font-size:.9rem}
    .btn-row{display:flex;flex-wrap:wrap;gap:12px}

    .hero{padding:54px 0 70px;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
    .hero-copy{display:grid;gap:20px}
    .hero-badge{
      width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:.6rem;
      padding:8px 13px;border-radius:999px;background:rgba(255,253,248,.76);border:1px solid var(--line);
      color:var(--brown);font-weight:800;font-size:.88rem;
    }
    .hero-points{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
    .hero-point{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-weight:700;font-size:.95rem}
    .check{width:22px;height:22px;min-width:22px;border-radius:999px;background:rgba(216,168,95,.24);display:grid;place-items:center;color:var(--main-dark);font-weight:900}

    .hero-visual{
      position:relative;border-radius:var(--radius-xl);background:linear-gradient(145deg,#fffaf1,#ead8bf);
      min-height:390px;padding:22px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.75);overflow:hidden;
    }
    .hero-visual::before{content:"";position:absolute;inset:auto -20% -26% -15%;height:240px;background:rgba(216,168,95,.22);border-radius:50%}
    .hero-visual::after{content:"";position:absolute;right:-70px;top:-70px;width:180px;height:180px;border-radius:50%;background:rgba(201,135,88,.2)}
    .device-card{
      position:absolute;left:20px;bottom:22px;width:min(300px,72%);padding:18px;border-radius:22px;background:rgba(255,253,248,.9);border:1px solid rgba(226,210,190,.9);box-shadow:var(--shadow-soft)
    }
    .device-top{height:12px;width:54px;background:var(--line);border-radius:999px;margin-bottom:14px}
    .pdf-lines{display:grid;gap:8px}.pdf-lines span{height:9px;border-radius:999px;background:rgba(216,168,95,.35)}.pdf-lines span:nth-child(2){width:78%}.pdf-lines span:nth-child(3){width:62%}
    .download-chip{margin-top:14px;width:max-content;padding:7px 11px;border-radius:999px;background:var(--brown);color:#fff;font-size:.78rem;font-weight:800}
    .hero-dog{position:absolute;right:15px;bottom:14px;width:min(236px,48%);z-index:2}
    .hero-drone{position:absolute;right:25px;top:36px;width:min(180px,38%);z-index:1;filter:drop-shadow(0 10px 16px rgba(77,58,47,.18))}
    .float-card{position:absolute;left:24px;top:26px;padding:10px 13px;border-radius:15px;background:#fffdf8;border:1px solid var(--line);box-shadow:var(--shadow-soft);font-weight:900;color:var(--brown);z-index:3;font-size:.88rem}

    .notice-bar{background:var(--brown);color:#fff;padding:14px 0}.notice-inner{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.notice-inner p{color:#fff;font-weight:700}.notice-links{display:flex;flex-wrap:wrap;gap:8px}.notice-links a{padding:7px 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;font-weight:800;font-size:.9rem}

    .card{
      background:rgba(255,253,248,.86);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-soft);
    }
    .card-icon{width:50px;height:50px;border-radius:18px;background:rgba(216,168,95,.2);display:grid;place-items:center;margin-bottom:14px;color:var(--main-dark)}
    .card-icon svg{width:28px;height:28px}

    .downloads-wrap{background:rgba(255,253,248,.55);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

    .download-card{display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
    .download-card::before{content:"PDF";position:absolute;right:-15px;top:16px;rotate:12deg;font-size:3.6rem;font-weight:1000;color:rgba(216,168,95,.12);letter-spacing:-.06em}
    .tag-row{display:flex;flex-wrap:wrap;gap:7px;position:relative;z-index:1}
    .tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:rgba(216,168,95,.18);color:var(--main-dark);font-weight:800;font-size:.78rem}
    .tag--brown{background:rgba(77,58,47,.09);color:var(--brown)}
    .download-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.82rem;border-top:1px dashed var(--line);padding-top:12px}
    .download-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}

    .service-card{min-height:100%;display:grid;gap:12px}
    .service-card strong{color:var(--brown);font-size:1.04rem}
    .flow{display:grid;gap:14px;margin-top:24px}.flow-step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
    .num{width:38px;height:38px;border-radius:999px;background:var(--main);color:#fff;display:grid;place-items:center;font-weight:1000}

    .image-panel{background:linear-gradient(145deg,#fffdf8,#efe2d0);border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-soft);overflow:hidden;position:relative;min-height:270px;display:grid;place-items:center}
    .image-panel svg{width:100%;max-width:430px}
    .split{display:grid;gap:28px;align-items:center}

    .faq details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow-soft)}
    .faq details + details{margin-top:12px}
    .faq summary{cursor:pointer;font-weight:900;color:var(--brown)}
    .faq p{margin-top:10px}

    .cta-box{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brown),#6a4b38);border-radius:var(--radius-xl);padding:32px;color:#fff;box-shadow:var(--shadow)}
    .cta-box h2,.cta-box p{color:#fff}.cta-box p{opacity:.9}.cta-box::after{content:"";position:absolute;right:-80px;bottom:-90px;width:250px;height:250px;border-radius:50%;background:rgba(216,168,95,.25)}
    .cta-content{position:relative;z-index:1;display:grid;gap:18px}
    .cta-box .btn--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}

    .site-footer{padding:40px 0;background:#3f342c;color:#fff}.footer-inner{display:flex;flex-direction:column;gap:12px}.site-footer p,.site-footer a{color:rgba(255,255,255,.84)}

    .floating-contact{
      position:fixed;left:12px;right:12px;bottom:12px;z-index:40;
      display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;border-radius:22px;background:rgba(255,253,248,.92);border:1px solid var(--line);box-shadow:0 12px 32px rgba(77,58,47,.2);backdrop-filter:blur(12px)
    }
    .floating-contact .btn{min-height:44px;padding:9px 10px;font-size:.9rem}

    @media (min-width: 720px){
      .grid-2{grid-template-columns:repeat(2,1fr)}
      .grid-3{grid-template-columns:repeat(2,1fr)}
      .grid-4{grid-template-columns:repeat(2,1fr)}
      .hero-points{grid-template-columns:repeat(2,1fr)}
      .notice-inner{flex-direction:row;align-items:center;justify-content:space-between}
      .split{grid-template-columns:1.05fr .95fr}
      .cta-box{padding:42px}
    }
    @media (min-width: 960px){
      .hero{padding:80px 0 88px}.hero-grid{grid-template-columns:1.06fr .94fr;gap:48px}
      .grid-3{grid-template-columns:repeat(3,1fr)}
      .grid-4{grid-template-columns:repeat(4,1fr)}
      .nav,.header-contact{display:flex}
      .floating-contact{display:none}
      .section{padding:92px 0}
      .hero-visual{min-height:480px}.hero-dog{width:280px}.hero-drone{width:205px}.device-card{width:315px}
    }
    @media (prefers-reduced-motion: reduce){
      *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    }


/* ==============================
   Mobile bottom fixed CTA
   ============================== */
.mobile-bottom-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(226, 210, 190, .9);
  border-radius: 999px;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 12px 34px rgba(77, 58, 47, .22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.mobile-bottom-cta__item {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  color: var(--brown);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.mobile-bottom-cta__item:focus-visible {
  outline: 3px solid rgba(216, 168, 95, .45);
  outline-offset: 2px;
}

.mobile-bottom-cta__item:hover {
  transform: translateY(-1px);
  background: rgba(216, 168, 95, .16);
}

.mobile-bottom-cta__item--tel {
  color: var(--white);
  background: linear-gradient(135deg, var(--main), var(--sub));
  box-shadow: 0 8px 18px rgba(184, 123, 63, .28);
}

.mobile-bottom-cta__item--tel:hover {
  color: var(--white);
  background: linear-gradient(135deg, var(--main-dark), var(--sub));
}

.mobile-bottom-cta__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(77, 58, 47, .08);
  font-size: 13px;
}

.mobile-bottom-cta__item--tel .mobile-bottom-cta__icon {
  background: rgba(255, 255, 255, .2);
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-cta {
    display: grid;
  }
}

@media (min-width: 768px) {
  .mobile-bottom-cta {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-cta__item {
    transition: none;
  }

  .mobile-bottom-cta__item:hover {
    transform: none;
  }
}


/* ==============================
   Hero PNG image adjustment
   ============================== */
.hero-visual {
  overflow: hidden;
}

.hero-dog-frame {
  position: absolute;
  left: clamp(10px, 5vw, 52px);
  bottom: clamp(0px, 1.4vw, 18px);
  z-index: 2;
  width: min(58%, 430px);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: none;
}

.hero-dog-frame .hero-dog {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left bottom;
  max-width: none;
}

@media (max-width: 900px) {
  .hero-dog-frame {
    width: min(64%, 390px);
    left: clamp(0px, 3vw, 24px);
    bottom: 0;
  }
}

@media (max-width: 640px) {
  .hero-visual {
    min-height: 380px;
  }

  .hero-dog-frame {
    width: 76%;
    left: -4%;
    bottom: 0;
  }

  .device-card {
    right: 8px;
    width: min(54%, 210px);
  }

  .hero-drone {
    width: 34%;
    right: 8%;
    top: 12%;
  }
}


/* ==============================
   Final PNG illustration handling
   ============================== */
.image-panel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.hero-dog-frame {
  aspect-ratio: 4 / 3;
}

.hero-dog-frame .hero-dog {
  object-fit: contain;
  object-position: left bottom;
}


/* ==============================
   Hero dog right-aligned final adjustment
   ============================== */
.hero-visual {
  min-height: 430px;
}

.hero-dog-frame {
  position: absolute;
  left: auto;
  right: 14px;
  bottom: 8px;
  z-index: 2;
  width: auto;
  height: min(84%, 360px);
  aspect-ratio: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.hero-dog-frame .hero-dog {
  width: auto;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  max-width: min(42%, 260px);
}

.device-card {
  left: 20px;
  right: auto;
  bottom: 22px;
  width: min(250px, 52%);
  z-index: 3;
}

.float-card {
  z-index: 4;
}

.hero-drone {
  right: 28px;
  top: 32px;
  width: min(168px, 34%);
}

@media (max-width: 900px) {
  .hero-visual {
    min-height: 400px;
  }

  .hero-dog-frame {
    right: 8px;
    bottom: 4px;
    height: min(76%, 300px);
  }

  .hero-dog-frame .hero-dog {
    max-width: min(44%, 230px);
  }

  .device-card {
    width: min(220px, 50%);
  }
}

@media (max-width: 640px) {
  .hero-visual {
    min-height: 360px;
  }

  .hero-dog-frame {
    right: -6px;
    bottom: 0;
    height: min(74%, 250px);
  }

  .hero-dog-frame .hero-dog {
    max-width: min(48%, 200px);
  }

  .device-card {
    left: 12px;
    bottom: 14px;
    width: min(190px, 54%);
  }

  .hero-drone {
    right: 8px;
    top: 14px;
    width: min(132px, 30%);
  }
}


/* ==============================
   Hero vertical dog large display
   ============================== */
.hero-visual {
  min-height: 450px;
}

.hero-dog-frame {
  position: absolute;
  left: auto;
  right: -6px;
  bottom: 0;
  z-index: 2;
  width: auto;
  height: min(100%, 500px);
  aspect-ratio: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.hero-dog-frame .hero-dog {
  width: auto;
  height: 100%;
  max-width: min(69%, 458px);
  display: block;
  object-fit: contain;
  object-position: right bottom;
}

.device-card {
  left: 18px;
  bottom: 22px;
  width: min(190px, 38%);
  z-index: 3;
}

.float-card {
  left: 24px;
  top: 26px;
  z-index: 4;
}

.hero-drone {
  right: 30px;
  top: 32px;
  width: min(128px, 24%);
  z-index: 1;
}

@media (max-width: 900px) {
  .hero-visual {
    min-height: 410px;
  }

  .hero-dog-frame {
    right: -6px;
    height: min(96%, 430px);
  }

  .hero-dog-frame .hero-dog {
    max-width: min(66%, 390px);
  }

  .device-card {
    width: min(180px, 40%);
  }
}

@media (max-width: 640px) {
  .hero-visual {
    min-height: 360px;
  }

  .hero-dog-frame {
    right: -10px;
    bottom: 0;
    height: min(92%, 320px);
  }

  .hero-dog-frame .hero-dog {
    max-width: min(63%, 315px);
  }

  .device-card {
    left: 12px;
    bottom: 12px;
    width: min(148px, 44%);
    padding: 14px;
  }

  .float-card {
    left: 14px;
    top: 14px;
    padding: 8px 11px;
    font-size: .8rem;
  }

  .hero-drone {
    right: 8px;
    top: 12px;
    width: min(96px, 20%);
  }
}


/* ==============================
   Hero dog-only visual
   ============================== */
.hero-visual--dog-only {
  position: relative;
  min-height: 450px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 253, 248, .86);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.hero-visual--dog-only::before,
.hero-visual--dog-only::after {
  display: none;
}

.hero-visual--dog-only .hero-dog-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.hero-visual--dog-only .hero-dog {
  width: auto;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 900px) {
  .hero-visual--dog-only {
    min-height: 400px;
  }
}

@media (max-width: 640px) {
  .hero-visual--dog-only {
    min-height: 350px;
  }

  .hero-visual--dog-only .hero-dog-frame {
    right: 0;
    bottom: 0;
  }

  .hero-visual--dog-only .hero-dog {
    height: 100%;
    width: auto;
    max-width: none;
  }
}