:root{
    --white:#FFFFFF;
    --pink-50:#FEF5F9;
    --pink-100:#FCE4EE;
    --pink-200:#FAD2E4;
    --pink-300:#F7B3D2;
    --pink-500:#EA5C8C;
    --pink-600:#D6437A;
    --blue-50:#F2FAFD;
    --blue-100:#E0F2FA;
    --blue-200:#C9E9F5;
    --blue-500:#5FAFD1;
    --mint-100:#C9EEE1;
    --ink:#2A2530;
    --ink-soft:#7A7280;
    --line:#F1E4EC;
    --radius:22px;
    --shadow:0 10px 30px rgba(234,92,140,0.10);
    --shadow-soft:0 4px 16px rgba(42,37,48,0.06);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ scroll-behavior:smooth; }
  body{
    font-family:"Prompt","Noto Sans Thai",-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.65;
    width:100%;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  .container{max-width:1280px; margin:0 auto; padding:0 40px;}
  h1,h2,h3{color:var(--ink); font-weight:700;}
  .display{ font-family:"Playfair Display", serif; }
  section{padding:96px 0;}
  section[id], div[id]{ scroll-margin-top:104px; }
  .block-title{ font-size:30px; font-family:"Playfair Display", serif; margin-bottom:10px; line-height:1.3; }
  /* soft full-bleed wash band: fades from white into a tint and back, so section edges blend instead of cutting hard */
  .band{
    padding:80px 0;
    background:linear-gradient(to bottom, var(--white) 0, var(--band-tint) 90px, var(--band-tint) calc(100% - 90px), var(--white) 100%);
  }

  /* ---------- BUTTONS ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 30px; border-radius:999px; font-weight:600;
    font-size:15px; cursor:pointer; border:none; transition:.2s;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--pink-500); color:var(--white); box-shadow:var(--shadow); }
  .btn-primary:hover{ background:var(--pink-600); transform:translateY(-2px); }
  .btn-secondary{ background:var(--white); color:var(--ink); border:1.5px solid var(--ink); }
  .btn-secondary:hover{ background:var(--ink); color:var(--white); }
  .btn-outline-blue{ background:var(--white); color:var(--blue-500); border:1.5px solid var(--blue-500); }
  .btn-outline-blue:hover{ background:var(--blue-50); }
  .btn-sm{ padding:9px 18px; font-size:13px; }

  /* ---------- MARQUEE TICKER ---------- */
  .ticker-wrap{
    background:var(--pink-500); color:#fff; overflow:hidden; white-space:nowrap;
    padding:9px 0; font-size:12.5px; font-weight:600; letter-spacing:.3px;
  }
  .ticker-track{ display:inline-block; animation: scroll-left 26s linear infinite; }
  .ticker-track span{ margin:0 28px; }
  @keyframes scroll-left{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 40px; max-width:1280px; margin:0 auto; position:relative; }
  .logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:21px; color:var(--ink); font-family:"Playfair Display", serif; letter-spacing:.5px; }
  .logo img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
  nav ul{ display:flex; gap:26px; }
  nav a{ font-size:13.5px; font-weight:600; color:var(--ink); padding-bottom:4px; border-bottom:2px solid transparent; transition:.2s; }
  nav a:hover{ color:var(--pink-500); }
  nav a.active{ color:var(--pink-500); border-bottom-color:var(--pink-500); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .icon-btn{
    width:38px; height:38px; border-radius:50%; background:var(--pink-50); color:var(--pink-500);
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .hamburger{ display:none; font-size:22px; background:none; border:none; color:var(--ink); cursor:pointer; width:38px; height:38px; }

  .mobile-menu{
    display:none; flex-direction:column; gap:2px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-soft); padding:8px 24px 16px;
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{ padding:13px 8px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); }
  .mobile-menu a:last-of-type{ border-bottom:none; }
  .mobile-menu .btn{ margin-top:12px; justify-content:center; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, var(--pink-100) 0%, var(--pink-50) 45%, var(--white) 85%);
    padding:64px 0 56px;
  }
  .hero-inner{
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
    min-height:520px;
  }
  .hero-badge{
    display:inline-flex; align-items:center; gap:6px; background:var(--white); color:var(--ink);
    padding:9px 20px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:24px;
    box-shadow:var(--shadow-soft);
  }
  .hero h1{
    font-size:42px; line-height:1.28; margin-bottom:20px; font-weight:800;
    font-family:"Prompt","Noto Sans Thai",sans-serif; color:var(--ink);
  }
  .hero h1 em{ font-style:normal; color:var(--pink-500); }
  .hero p.sub{ font-size:15.5px; color:var(--ink-soft); margin-bottom:32px; max-width:460px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  .hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; padding:20px; }
  .hero-blob{ position:absolute; border-radius:50%; filter:blur(6px); }
  .blob-1{ width:320px; height:320px; background:var(--mint-100); top:-50px; right:-40px; }
  .blob-2{ width:300px; height:300px; background:var(--pink-200); bottom:-50px; left:-50px; }
  .blob-3{ width:220px; height:220px; background:var(--pink-100); top:-10px; left:-30px; }
  .hero-paw{ position:absolute; color:var(--pink-300); opacity:.8; z-index:2; }
  .hero-banner{ position:relative; width:100%; max-width:460px; }
  .hero-banner-img{
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 0%, black 30%, rgba(0,0,0,.75) 48%, rgba(0,0,0,.4) 62%, rgba(0,0,0,.12) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 80% at center, black 0%, black 30%, rgba(0,0,0,.75) 48%, rgba(0,0,0,.4) 62%, rgba(0,0,0,.12) 80%, transparent 100%);
  }
  .hero-banner img{ width:100%; height:340px; object-fit:cover; object-position:center; display:block; }
  .hero-dots{ display:flex; gap:6px; justify-content:center; margin-top:20px; }
  .hero-dots span{ width:7px; height:7px; border-radius:50%; background:var(--pink-200); }
  .hero-dots span.active{ background:var(--pink-500); width:20px; border-radius:4px; }
  .hero-float{
    position:absolute; background:var(--white); padding:10px 16px; border-radius:999px;
    box-shadow:var(--shadow-soft); font-size:12.5px; font-weight:600; color:var(--ink);
    display:flex; align-items:center; gap:6px; z-index:2;
  }
  .float-1{ top:-10px; right:10px; left:auto; }
  .float-2{ bottom:20px; left:-22px; }

  /* ---------- SECTION HEADINGS (dash kicker like reference) ---------- */
  .section-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
  .kicker-line{
    display:flex; align-items:center; justify-content:center; gap:14px;
    color:var(--pink-500); font-weight:700; font-size:12.5px; letter-spacing:2px; text-transform:uppercase;
    margin-bottom:14px;
  }
  .kicker-line::before, .kicker-line::after{ content:""; width:30px; height:1px; background:var(--pink-300); }
  .section-head h2{ font-size:32px; font-family:"Playfair Display", serif; }
  .section-head h2 em{ font-style:normal; color:var(--pink-500); }
  .section-head p{ color:var(--ink-soft); margin-top:12px; font-size:15px; }

  /* ---------- TRUST STRIP ---------- */
  .trustbar{ background:var(--white); padding:0 0 8px; }
  .trust-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; text-align:center; }
  .trust-item{ padding:18px 10px; }
  .trust-item .icon{ font-size:26px; margin-bottom:8px; }
  .trust-item p{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }

  /* ---------- CATEGORY ROW (circular, like "Shop by category") ---------- */
  .cat-row{ display:flex; justify-content:center; gap:36px; flex-wrap:wrap; }
  .cat-item{ display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; }
  .cat-circle{
    width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:34px; transition:.2s; position:relative;
  }
  .cat-item:hover .cat-circle{ transform:translateY(-4px); box-shadow:var(--shadow); }
  .cat-circle.c1{ background:var(--pink-100); }
  .cat-circle.c2{ background:var(--blue-100); }
  .cat-circle.c3{ background:var(--pink-200); }
  .cat-circle.c4{ background:var(--blue-200); }
  .cat-circle.c5{ background:var(--pink-100); }
  .cat-badge{
    position:absolute; top:-4px; right:-2px; background:var(--pink-500); color:#fff; font-size:10px;
    font-weight:700; padding:2px 8px; border-radius:999px;
  }
  .cat-item p{ font-size:13px; font-weight:600; }

  /* ---------- ABOUT ---------- */
  .about{ --band-tint:var(--blue-50); }
  .about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .about-card{ text-align:center; padding:32px 22px; border-radius:var(--radius); background:var(--white); box-shadow:var(--shadow-soft); }
  .about-card .icon{ font-size:30px; margin-bottom:12px; }
  .about-card h3{ font-size:15px; margin-bottom:8px; font-family:"Playfair Display", serif; letter-spacing:1px; }
  .about-card p{ font-size:13.5px; color:var(--ink-soft); }

  /* ---------- PAIN POINTS ---------- */
  .pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .pain-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
    transition:.2s;
  }
  .pain-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
  .pain-card .icon{ font-size:26px; margin-bottom:10px; }
  .pain-card h3{ font-size:15.5px; margin-bottom:6px; }
  .pain-card p{ font-size:13.5px; color:var(--ink-soft); }

  /* ---------- PRODUCT CARDS (ladder, restyled like product grid) ---------- */
  .ladder-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
  .ladder-card{
    display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:.2s; cursor:pointer; text-align:left;
  }
  .ladder-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--pink-200); }
  .ladder-thumb{
    height:110px; display:flex; align-items:center; justify-content:center; font-size:34px; position:relative;
  }
  .ladder-card:nth-child(odd) .ladder-thumb{ background:var(--pink-100); }
  .ladder-card:nth-child(even) .ladder-thumb{ background:var(--blue-100); }
  .ladder-body{ padding:16px; }
  .ladder-card .badge{
    display:inline-block; background:var(--pink-500); color:#fff; font-size:10px; font-weight:700;
    padding:4px 10px; border-radius:999px; margin-bottom:10px;
  }
  .ladder-card h3{ font-size:15px; margin-bottom:6px; }
  .ladder-card .price{ color:var(--pink-600); font-weight:700; font-size:14.5px; margin-bottom:6px; }
  .ladder-card p{ font-size:12px; color:var(--ink-soft); }
  .price-note{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:22px; }

  /* ---------- FULL CATALOG ---------- */
  .catalog-group{ margin-bottom:36px; }
  .catalog-group:last-child{ margin-bottom:0; }
  .catalog-group-title{
    font-weight:700; font-size:15px; color:var(--ink); margin-bottom:16px;
    display:flex; align-items:center; gap:10px;
  }
  .catalog-group-title .tag{ background:var(--pink-500); color:#fff; font-size:10px; font-weight:700; padding:3px 10px; border-radius:999px; }
  .catalog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .catalog-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:.2s;
  }
  .catalog-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--pink-200); }
  .catalog-thumb{
    height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; font-size:30px; position:relative;
  }
  .catalog-card:nth-child(odd) .catalog-thumb{ background:var(--pink-100); }
  .catalog-card:nth-child(even) .catalog-thumb{ background:var(--blue-100); }
  .catalog-thumb .cam-note{ font-size:10.5px; color:var(--ink-soft); font-weight:600; }
  .catalog-body{ padding:14px; }
  .catalog-card h4{ font-size:14px; margin-bottom:4px; }
  .catalog-card .catalog-price{ color:var(--pink-600); font-weight:700; font-size:13px; margin-bottom:10px; }
  .catalog-ask{
    display:inline-flex; align-items:center; gap:5px; background:var(--pink-50); color:var(--pink-600);
    font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; width:100%; justify-content:center;
  }
  .catalog-ask:hover{ background:var(--pink-500); color:#fff; }
  .catalog-cta{
    background:linear-gradient(135deg, var(--pink-100), var(--pink-50)); border-radius:28px;
    text-align:center; padding:40px 24px; margin-top:44px;
  }
  .catalog-cta h3{ font-family:"Playfair Display", serif; font-size:22px; margin-bottom:8px; }
  .catalog-cta p{ color:var(--ink-soft); margin-bottom:22px; font-size:14px; }

  /* ---------- CATALOG MODAL ---------- */
  .catalog-modal{
    display:none; position:fixed; inset:0; background:rgba(42,37,48,.6); z-index:500;
    align-items:flex-start; justify-content:center; padding:48px 20px; overflow-y:auto;
  }
  .catalog-modal.open{ display:flex; }
  .catalog-modal-inner{
    background:var(--white); border-radius:28px; max-width:1120px; width:100%; max-height:88vh;
    display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35);
  }
  .catalog-modal-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:28px 32px 0; }
  .catalog-close{
    width:38px; height:38px; border-radius:50%; background:var(--pink-50); color:var(--pink-600);
    border:none; font-size:16px; cursor:pointer; flex-shrink:0; transition:.2s;
  }
  .catalog-close:hover{ background:var(--pink-500); color:#fff; }
  .catalog-tabs{ display:flex; gap:8px; flex-wrap:wrap; padding:20px 32px 0; }
  .catalog-tab{
    padding:8px 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--white);
    font-weight:600; font-size:12.5px; cursor:pointer; color:var(--ink-soft); transition:.2s;
  }
  .catalog-tab.active, .catalog-tab:hover{ background:var(--pink-500); color:#fff; border-color:var(--pink-500); }
  .catalog-modal-body{ padding:24px 32px 32px; overflow-y:auto; }

  /* ---------- CAT WALL ---------- */
  .catwall{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
  .catwall-img{ order:2; }

  /* ---------- MINI HOME SELECTOR ---------- */
  .minihome{
    background:linear-gradient(135deg, var(--pink-50), var(--blue-50));
    border-radius:32px; padding:50px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
  }
  .size-tabs{ display:flex; gap:10px; margin:18px 0; }
  .size-tab{ padding:10px 24px; border-radius:999px; background:var(--white); border:1.5px solid var(--line); font-weight:700; cursor:pointer; }
  .size-tab.active{ background:var(--pink-500); color:#fff; border-color:var(--pink-500); }
  .option-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 26px; }
  .option-tag{ background:var(--white); padding:7px 14px; border-radius:999px; font-size:13px; border:1px solid var(--line); }
  .mh-img{ background:var(--white); border-radius:24px; padding:20px; box-shadow:var(--shadow); text-align:center; }
  .mh-img .placeholder{ background:var(--pink-100); border-radius:16px; height:260px; display:flex; align-items:center; justify-content:center; font-size:50px; }

  /* ---------- PORTFOLIO ---------- */
  .portfolio{ --band-tint:var(--pink-50); }
  .portfolio-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .portfolio-item{
    position:relative; border-radius:22px; overflow:hidden; background:var(--white);
    box-shadow:var(--shadow-soft); transition:.2s; border:1px solid var(--line);
  }
  .portfolio-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--pink-200); }
  .portfolio-item .ph{
    height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background:linear-gradient(150deg, var(--pink-100), var(--blue-100));
  }
  .portfolio-item:nth-child(even) .ph{ background:linear-gradient(150deg, var(--blue-100), var(--pink-100)); }
  .portfolio-item .ph svg{ width:34px; height:34px; color:var(--pink-500); opacity:.85; }
  .portfolio-item .ph .ph-note{ font-size:11px; font-weight:600; color:var(--ink-soft); }
  .portfolio-item .cap{ padding:14px 16px; font-size:13px; font-weight:600; color:var(--ink); }
  .portfolio-item .tag{
    position:absolute; top:12px; left:12px; background:rgba(255,255,255,.95); color:var(--pink-600);
    font-size:10.5px; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.3px; z-index:2;
  }
  .portfolio-item .ph-zoom{
    position:absolute; bottom:10px; right:10px; background:rgba(42,37,48,.75); color:#fff;
    font-size:11px; font-weight:600; padding:5px 12px; border-radius:999px;
  }

  /* ---------- PORTFOLIO BEFORE/AFTER MODAL ---------- */
  .portfolio-compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .portfolio-compare-col{ position:relative; }
  .portfolio-compare-col img{ width:100%; height:280px; object-fit:cover; border-radius:16px; display:block; }
  .portfolio-compare-label{
    position:absolute; top:10px; left:10px; background:rgba(42,37,48,.75); color:#fff;
    font-size:11.5px; font-weight:700; padding:5px 14px; border-radius:999px; letter-spacing:.3px;
  }
  .portfolio-compare-label.after{ background:var(--pink-500); }
  @media (max-width: 640px){
    .portfolio-compare{ grid-template-columns:1fr; }
  }

  /* ---------- DIY VS PRO ---------- */
  .compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .compare-card{ background:var(--white); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-soft); border-top:5px solid var(--blue-500); }
  .compare-card.pro{ border-top-color:var(--pink-500); }
  .compare-card h3{ margin-bottom:16px; font-family:"Playfair Display", serif; }
  .compare-card ul li{ font-size:14px; margin-bottom:9px; padding-left:22px; position:relative; color:var(--ink-soft); }
  .compare-card ul li:before{ content:"✓"; position:absolute; left:0; color:var(--pink-500); font-weight:700; }

  /* ---------- STEPS ---------- */
  .steps{ --band-tint:var(--blue-50); }
  .steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; }
  .step-num{
    width:54px; height:54px; border-radius:50%; background:var(--white); color:var(--pink-500);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px;
    margin:0 auto 16px; box-shadow:var(--shadow-soft); font-family:"Playfair Display", serif;
  }
  .step h3{ font-size:15.5px; margin-bottom:8px; }
  .step p{ font-size:13.5px; color:var(--ink-soft); }

  /* ---------- SAFETY (numbered statement style) ---------- */
  .safety-head{ text-align:center; margin-bottom:44px; }
  .safety-head .num{ font-family:"Playfair Display", serif; font-size:15px; color:var(--pink-500); letter-spacing:2px; }
  .safety-head h2{ font-size:34px; font-family:"Playfair Display", serif; margin-top:6px; }
  .safety-head h2 em{ font-style:normal; color:var(--pink-500); }
  .safety-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  .safety-item{ display:flex; gap:12px; align-items:flex-start; background:var(--white); padding:18px 20px; border-radius:16px; border:1px solid var(--line); }
  .safety-item .chk{ color:var(--pink-500); font-size:18px; }
  .safety-item p{ font-size:13.5px; }

  /* ---------- REVIEW (placeholder note) ---------- */
  .review-note{ text-align:center; background:var(--pink-50); border:2px dashed var(--pink-200); border-radius:20px; padding:44px; color:var(--ink-soft); font-size:14px; }

  /* ---------- SERVICE AREA ---------- */
  .service{ background:linear-gradient(135deg, var(--blue-100), var(--pink-100)); border-radius:32px; padding:50px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
  .service-map{ background:var(--white); border-radius:20px; height:220px; display:flex; align-items:center; justify-content:center; font-size:50px; box-shadow:var(--shadow-soft); }
  .area-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .area-pill{ background:var(--white); padding:8px 18px; border-radius:999px; font-size:13px; font-weight:600; }
  .area-pill.expanding{ background:var(--pink-500); color:#fff; }

  /* ---------- FAQ ---------- */
  .faq-item{ background:var(--white); border:1px solid var(--line); border-radius:16px; margin-bottom:12px; overflow:hidden; }
  .faq-q{ padding:19px 22px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:14.5px; }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 22px; font-size:13.5px; color:var(--ink-soft); }
  .faq-item.open .faq-a{ max-height:200px; padding-bottom:19px; }
  .faq-item.open .faq-q .arrow{ transform:rotate(180deg); color:var(--pink-500); }
  .arrow{ transition:.2s; }

  /* ---------- FINAL CTA ---------- */
  .final-cta{ background:linear-gradient(135deg, var(--pink-100), var(--pink-50)); text-align:center; border-radius:32px; padding:64px 24px; }
  .final-cta h2{ font-size:32px; margin-bottom:12px; font-family:"Playfair Display", serif; }
  .final-cta p{ color:var(--ink-soft); margin-bottom:26px; }
  .final-areas{ margin-top:26px; font-size:13px; color:var(--ink-soft); }

  /* ---------- CONTACT INFO ---------- */
  .contact-info{
    position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:0; align-items:stretch;
    background:var(--white); border:1px solid var(--line); border-radius:32px;
    padding:0; margin-top:24px; overflow:hidden; text-align:left;
    box-shadow:0 24px 60px rgba(42,37,48,0.1);
  }
  .contact-info::before{
    content:""; position:absolute; top:0; left:0; right:0; height:6px;
    background:linear-gradient(90deg, var(--pink-500), var(--blue-500), var(--pink-500));
  }
  .contact-col{ padding:44px 44px 40px; position:relative; z-index:1; }
  .contact-col.social-col{
    background:linear-gradient(160deg, var(--pink-50) 0%, var(--blue-50) 100%);
    border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:center;
    position:relative; overflow:hidden;
  }
  .contact-col.social-col::after{
    content:""; position:absolute; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, var(--pink-200) 0%, transparent 70%);
    opacity:.5; top:-60px; right:-60px;
  }
  .contact-badge{
    display:inline-flex; align-items:center; gap:6px; background:var(--pink-100); color:var(--pink-600);
    padding:7px 16px; border-radius:999px; font-size:12.5px; font-weight:700; margin-bottom:18px;
  }
  .contact-info h3{ font-family:"Playfair Display", serif; font-size:26px; margin-bottom:4px; }
  .contact-info .tagline{ color:var(--ink-soft); font-size:13.5px; margin-bottom:26px; }
  .contact-line{
    display:flex; align-items:center; gap:14px; font-size:14.5px; margin-bottom:18px;
    padding:8px 10px 8px 8px; margin-left:-8px; border-radius:16px; transition:.2s;
  }
  .contact-line:last-child{ margin-bottom:0; }
  a.contact-line{ color:inherit; cursor:pointer; }
  a.contact-line:hover{ background:var(--pink-50); color:var(--pink-600); }
  .contact-line .ico{
    width:42px; height:42px; border-radius:50%; color:#fff;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 6px 14px rgba(42,37,48,0.14);
  }
  .contact-line .ico svg{ width:18px; height:18px; }
  .contact-line .ico.c-pink{ background:linear-gradient(135deg, var(--pink-500), var(--pink-600)); }
  .contact-line .ico.c-blue{ background:linear-gradient(135deg, var(--blue-500), #3e8cb0); }
  .contact-line .ico.c-green{ background:linear-gradient(135deg, #3bc47d, #1c8a52); }
  .contact-placeholder{ color:var(--pink-600); font-style:normal; font-weight:600; }
  .social-heading{ font-weight:700; font-size:14.5px; margin-bottom:18px; color:var(--ink); line-height:1.5; }
  .social-row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start; position:relative; z-index:1; }
  .social-btn{
    width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    transition:.2s; box-shadow:0 8px 20px rgba(42,37,48,0.16); border:3px solid var(--white);
  }
  .social-btn svg{ width:23px; height:23px; }
  .social-btn img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .social-btn:hover{ transform:translateY(-4px) scale(1.08); box-shadow:0 12px 24px rgba(42,37,48,0.22); }
  .social-btn.fb{ background:#1877F2; color:#fff; }
  .social-btn.ig{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color:#fff; }
  .social-btn.line{ background:#06C755; color:#fff; }
  .social-btn.tiktok{ background:#000; color:#fff; }
  .social-label{ text-align:center; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-top:8px; }
  .social-item{ display:flex; flex-direction:column; align-items:center; }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--ink); color:#d8d2dc; padding:52px 0 96px; }
  .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; }
  footer h4{ color:#fff; font-size:14px; margin-bottom:14px; font-family:"Playfair Display", serif; letter-spacing:.5px; }
  footer a{ font-size:13px; color:#b6aebd; display:block; margin-bottom:10px; }
  footer a:hover{ color:var(--pink-300); }
  .footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-family:"Playfair Display", serif; font-size:19px; color:#fff; }
  .footer-logo img{ width:36px; height:36px; border-radius:50%; }
  .footer-bottom{ text-align:center; font-size:12px; color:#8a8290; margin-top:36px; padding-top:24px; border-top:1px solid #423b48; }

  /* ---------- TOAST ---------- */
  .toast{
    position:fixed; left:50%; bottom:90px; transform:translate(-50%, 20px);
    background:var(--ink); color:#fff; padding:14px 24px; border-radius:999px;
    font-size:14px; font-weight:600; box-shadow:var(--shadow); z-index:300;
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
    max-width:90vw; text-align:center;
  }
  .toast.show{ opacity:1; transform:translate(-50%, 0); }
  @media (max-width:900px){ .toast{ bottom:86px; } }

  /* ---------- MOBILE STICKY BAR ---------- */
  .mobile-sticky{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
    background:var(--white); border-top:1px solid var(--line); padding:12px 16px; box-shadow:0 -4px 16px rgba(0,0,0,.08);
  }
  .mobile-sticky .btn{ width:100%; justify-content:center; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    nav{ display:none; }
    .hamburger{ display:block; }
    .hero-inner, .catwall, .minihome, .service, .contact-info{ grid-template-columns:1fr; }
    .contact-col{ padding:28px; }
    .contact-col.social-col{ border-left:none; border-top:1px solid var(--line); }
    .social-row{ justify-content:center; }
    .hero-inner{ min-height:auto; }
    .hero-visual{ order:-1; }
    .hero-banner{ max-width:100%; }
    .hero-banner img{ height:240px; }
    .trust-grid{ grid-template-columns:repeat(3,1fr); }
    .pain-grid{ grid-template-columns:repeat(2,1fr); }
    .ladder-grid{ grid-template-columns:repeat(2,1fr); }
    .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
    .catalog-grid{ grid-template-columns:repeat(2,1fr); }
    .catalog-modal{ padding:0; }
    .catalog-modal-inner{ border-radius:0; max-height:100vh; height:100vh; }
    .catalog-modal-header{ padding:20px 20px 0; }
    .catalog-tabs{ padding:16px 20px 0; }
    .catalog-modal-body{ padding:18px 20px 28px; }
    .compare-grid, .steps-grid, .safety-grid, .footer-grid, .about-grid{ grid-template-columns:1fr 1fr; }
    .hero h1{ font-size:32px; }
    .cat-row{ gap:20px; }
    .cat-circle{ width:76px; height:76px; font-size:28px; }
    .mobile-sticky{ display:block; }
    section{ padding:52px 0; }
    .band{ padding:44px 0; }
  }
  @media (max-width: 560px){
    .trust-grid, .ladder-grid, .portfolio-grid, .steps-grid{ grid-template-columns:1fr 1fr; }
    .pain-grid, .footer-grid, .about-grid, .compare-grid, .safety-grid{ grid-template-columns:1fr; }
    .container{ padding:0 20px; }
    .nav-wrap{ padding:12px 20px; }
    .minihome, .service{ padding:28px 20px; }
    .hero{ padding:40px 0 40px; }
    .hero-float{ font-size:11px; padding:7px 12px; }
    .hero-paw{ display:none; }
    .cat-row{ gap:14px; justify-content:space-between; }
    .cat-circle{ width:64px; height:64px; font-size:24px; }
  }

/* ---------- PROMO BANNERS ---------- */
.banner-strip{ padding:20px 0 0; }
.banner-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
.banner-card{
  position:relative; display:block; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-soft);
  transition:.2s;
}
.banner-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.banner-card img{ width:100%; height:140px; object-fit:cover; display:block; }
.banner-cta{
  position:absolute; right:14px; bottom:14px; background:var(--pink-500); color:#fff;
  font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:999px; box-shadow:var(--shadow-soft);
}
@media (max-width: 560px){
  .banner-grid{ grid-template-columns:1fr; }
}