:root{
    --forest:#1B4332;
    --forest-deep:#0E2A1D;
    --forest-mid:#245943;
    --cream:#FDFCF0;
    --cream-dim:#F4F1E2;
    --sage:#9FBBA0;
    --sage-dim:#3E6350;
    --honey:#E3A857;
    --honey-deep:#C9873A;
    --ink:#152219;
    --ink-soft:#3B4E42;
    --line: rgba(27,67,50,0.14);
    --line-dark: rgba(253,252,240,0.14);
    --radius: 22px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3, .serif{
    font-family:'Instrument Serif', serif;
    font-weight:400;
    letter-spacing:-0.01em;
    margin:0;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  :focus-visible{outline:2px solid var(--honey); outline-offset:3px; border-radius:4px;}

  /* ---------- NAV ---------- */
  header.site{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background: rgba(253,252,240,0.0);
    transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
    padding:20px 0;
  }
  header.site.solid{
    background: rgba(253,252,240,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--line);
    padding:14px 0;
  }
  nav.wrap{display:flex; align-items:center; justify-content:space-between;}
  .logo{display:flex; align-items:center; gap:10px; font-size:22px; color:var(--forest);}
  .logo .tagchip{
    width:30px;height:30px;border-radius:9px;background:var(--forest);
    display:flex;align-items:center;justify-content:center;
    color:var(--cream); font-family:'Instrument Serif',serif; font-size:19px; font-style:italic;
    position:relative;
  }
  .logo .tagchip::after{
    content:''; position:absolute; top:-5px; left:6px; width:8px;height:8px;border-radius:50%;
    border:2px solid var(--forest); background:var(--cream);
  }
  nav .links{display:flex; gap:34px; align-items:center;}
  nav .links a{font-size:14.5px; color:var(--ink-soft); font-weight:600; transition:color .2s;}
  nav .links a:hover{color:var(--forest);}
  nav .cta{
    background:var(--forest); color:var(--cream); padding:10px 20px; border-radius:100px;
    font-size:14px; font-weight:700; transition:transform .2s, background .2s;
  }
  nav .cta:hover{background:var(--forest-mid); transform:translateY(-1px);}
  .nav-mobile-toggle{display:none;}
  @media(max-width:860px){
    nav .links{display:none;}
    .nav-mobile-toggle{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:168px 0 100px;
    background:
      radial-gradient(ellipse 900px 500px at 82% -10%, rgba(227,168,87,0.16), transparent 60%),
      var(--cream);
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.05fr 0.95fr; gap:40px; align-items:center;
  }
  @media(max-width:960px){ .hero-grid{grid-template-columns:1fr;} }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; color:var(--forest); background:var(--cream-dim);
    border:1px solid var(--line); padding:7px 14px 7px 10px; border-radius:100px;
    margin-bottom:26px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--honey);}

  h1.hero-title{
    font-size:clamp(40px, 6vw, 72px);
    line-height:0.98;
    color:var(--forest);
    max-width:620px;
  }
  h1.hero-title em{font-style:italic; color:var(--honey-deep);}
  .hero-sub{
    margin-top:24px; font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:480px;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; align-items:center;}
  .btn-primary{
    background:var(--forest); color:var(--cream); padding:15px 26px; border-radius:100px;
    font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s, background .2s; border:none; cursor:pointer;
  }
  .btn-primary:hover{background:var(--forest-mid); transform:translateY(-2px);}
  .btn-ghost{
    padding:15px 22px; border-radius:100px; font-weight:700; font-size:15px;
    border:1.5px solid var(--line); color:var(--forest); transition:border-color .2s, background .2s;
  }
  .btn-ghost:hover{border-color:var(--forest); background:var(--cream-dim);}

  .hero-note{margin-top:18px; font-size:12.5px; color:var(--ink-soft); opacity:0.8;}

  /* species strip */
  .species-strip{
    margin-top:56px; display:flex; gap:28px; align-items:center; flex-wrap:wrap;
  }
  .species-pill{
    display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); font-weight:600;
  }
  .species-pill svg{width:20px;height:20px;color:var(--forest);}

  /* ---------- TAG STACK (signature element) ---------- */
  .tag-stage{position:relative; height:460px; display:flex; align-items:center; justify-content:center;}
  .tag{
    position:absolute; width:300px; border-radius:26px;
    padding:26px 26px 24px;
    box-shadow: 0 30px 60px -20px rgba(15,42,29,0.35);
    transform-origin: top center;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  }
  .tag .ring{
    position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    width:30px;height:30px;border-radius:50%;
    border:6px solid var(--forest-deep); background:var(--cream);
  }
  .tag.dog{ background:var(--forest); color:var(--cream); z-index:3; animation: swayA 6s ease-in-out infinite; }
  .tag.cat{ background:var(--honey); color:var(--forest-deep); z-index:2;
    transform: translate(38px, 46px) rotate(9deg) scale(0.94); animation: swayB 7s ease-in-out infinite; }
  .tag.bird{ background:var(--cream-dim); color:var(--forest); border:1.5px solid var(--line); z-index:1;
    transform: translate(-42px, 84px) rotate(-11deg) scale(0.9); animation: swayC 8s ease-in-out infinite; }

  @keyframes swayA{0%,100%{transform:rotate(-2.5deg);}50%{transform:rotate(2.5deg);}}
  @keyframes swayB{0%,100%{transform:translate(38px,46px) rotate(9deg) scale(0.94);}50%{transform:translate(38px,46px) rotate(5deg) scale(0.94);}}
  @keyframes swayC{0%,100%{transform:translate(-42px,84px) rotate(-11deg) scale(0.9);}50%{transform:translate(-42px,84px) rotate(-7deg) scale(0.9);}}

  .tag .row1{display:flex; justify-content:space-between; align-items:flex-start;}
  .tag .name{font-family:'Instrument Serif',serif; font-size:30px; font-style:italic; margin-top:10px;}
  .tag .species-tag{font-size:10.5px; opacity:0.75;}
  .tag .divider{height:1px; background:currentColor; opacity:0.18; margin:16px 0;}
  .tag .stat-row{display:flex; justify-content:space-between; font-size:11.5px; margin-bottom:9px; opacity:0.9;}
  .tag .stat-row b{font-weight:700;}
  .tag .badge{
    font-size:10px; padding:3px 9px; border-radius:100px; font-weight:700;
  }
  .tag.dog .badge{background:rgba(253,252,240,0.16);}
  .tag.cat .badge{background:rgba(27,67,50,0.14);}
  .tag.bird .badge{background:rgba(27,67,50,0.08);}

  @media(max-width:960px){
    .tag-stage{height:380px; margin-top:20px;}
    .tag{width:250px;}
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:110px 0;}
  .section.tight{padding:80px 0;}
  .kicker{
    font-size:12px; color:var(--honey-deep); margin-bottom:14px; display:block;
  }
  h2.section-title{font-size:clamp(30px,4vw,46px); color:var(--forest); max-width:640px;}
  .section-sub{margin-top:16px; font-size:16.5px; color:var(--ink-soft); max-width:520px; line-height:1.6;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:56px;}

  /* ---------- FEATURES ---------- */
  .feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:620px){.feature-grid{grid-template-columns:1fr;}}
  .feature-card{
    background:var(--cream-dim); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 26px; transition:transform .25s, box-shadow .25s, border-color .25s;
  }
  .feature-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(15,42,29,0.25); border-color:rgba(27,67,50,0.28);}
  .feature-card .ficon{
    width:44px;height:44px;border-radius:12px; background:var(--forest); color:var(--cream);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  }
  .feature-card .ficon svg{width:22px;height:22px;}
  .feature-card h3{font-size:22px; color:var(--forest); margin-bottom:10px;}
  .feature-card p{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0;}
  .feature-card.ai .ficon{background:var(--honey); color:var(--forest-deep);}

  /* ---------- AI SPOTLIGHT ---------- */
  .ai-section{
    background:var(--forest); color:var(--cream); border-radius:36px; margin:0 32px;
    padding:90px 64px; position:relative; overflow:hidden;
  }
  @media(max-width:640px){.ai-section{padding:60px 26px; margin:0 16px; border-radius:26px;}}
  .ai-section::before{
    content:''; position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(227,168,87,0.18), transparent 70%);
    top:-220px; right:-160px;
  }
  .ai-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative;}
  @media(max-width:900px){.ai-grid{grid-template-columns:1fr;}}
  .ai-section h2{color:var(--cream); font-size:clamp(28px,3.6vw,42px); max-width:460px;}
  .ai-section p.section-sub{color:var(--sage);}
  .ai-list{margin-top:28px; display:flex; flex-direction:column; gap:16px;}
  .ai-list-item{display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:var(--cream);}
  .ai-list-item svg{width:18px;height:18px; flex-shrink:0; margin-top:2px; color:var(--honey);}

  .chat-mock{
    background:var(--forest-deep); border-radius:20px; padding:24px; border:1px solid var(--line-dark);
  }
  .chat-mock .mono{font-size:10.5px; color:var(--sage); margin-bottom:16px;}
  .bubble{
    border-radius:14px; padding:14px 16px; font-size:13.5px; line-height:1.55; margin-bottom:12px; max-width:88%;
  }
  .bubble.user{background:var(--sage-dim); color:var(--cream); margin-left:auto; border-bottom-right-radius:4px;}
  .bubble.ai{background:rgba(253,252,240,0.08); color:var(--cream); border-bottom-left-radius:4px;}
  .bubble.ai .flag{color:var(--honey); font-weight:700;}

  /* ---------- PRICING ---------- */
  .pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media(max-width:760px){.pricing-grid{grid-template-columns:1fr;}}
  .price-card{
    border-radius:28px; padding:38px; border:1px solid var(--line);
  }
  .price-card.free{background:var(--cream-dim);}
  .price-card.pro{background:var(--forest); color:var(--cream); position:relative;}
  .price-card .plan-name{font-size:26px; font-family:'Instrument Serif',serif; font-style:italic; color:var(--forest);}
  .price-card.pro .plan-name{color:var(--cream);}
  .price-card .price{margin-top:10px; font-size:15px; color:var(--ink-soft);}
  .price-card.pro .price{color:var(--sage);}
  .price-card .price b{font-size:30px; font-weight:800; color:var(--forest); font-family:'Manrope';}
  .price-card.pro .price b{color:var(--cream);}
  .price-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .price-list li{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--ink-soft);}
  .price-card.pro .price-list li{color:rgba(253,252,240,0.88);}
  .price-list svg{width:16px;height:16px; margin-top:3px; flex-shrink:0; color:var(--honey-deep);}
  .price-card.pro .price-list svg{color:var(--honey);}
  .price-card .cta-inline{
    display:inline-block; margin-top:28px; padding:13px 24px; border-radius:100px; font-weight:700; font-size:14px;
  }
  .price-card.free .cta-inline{border:1.5px solid var(--forest); color:var(--forest);}
  .price-card.pro .cta-inline{background:var(--honey); color:var(--forest-deep);}
  .most-popular{
    position:absolute; top:38px; right:38px; background:var(--honey); color:var(--forest-deep);
    font-size:10.5px; font-weight:800; padding:5px 12px; border-radius:100px; letter-spacing:0.04em; text-transform:uppercase;
  }

  /* ---------- FINAL CTA ---------- */
  .final-cta{text-align:center; padding:0 0 130px;}
  .final-cta h2{font-size:clamp(32px,5vw,58px); color:var(--forest); max-width:680px; margin:0 auto;}
  .final-cta .section-sub{margin:20px auto 0; text-align:center;}
  .store-badges{display:flex; gap:16px; justify-content:center; margin-top:38px; flex-wrap:wrap;}
  .store-badge{
    display:flex; align-items:center; gap:10px; background:var(--forest); color:var(--cream);
    padding:12px 22px; border-radius:14px; font-size:13px; opacity:0.55; cursor:not-allowed; position:relative;
  }
  .store-badge.live{opacity:1; cursor:pointer; transition:transform .2s, background .2s;}
  .store-badge.live:hover{background:var(--forest-mid); transform:translateY(-2px);}
  .store-badge svg{width:22px;height:22px;}
  .store-badge .lines{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2;}
  .store-badge .lines small{font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em;}
  .store-badge .lines strong{font-size:14.5px; font-weight:700;}
  .soon-tag{
    font-size:11px; color:var(--ink-soft); margin-top:14px;
  }

  /* ---------- FOOTER ---------- */
  footer{background:var(--forest-deep); color:var(--cream); padding:70px 0 34px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
  @media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
  .footer-brand .logo{color:var(--cream);}
  .footer-brand .logo .tagchip{background:var(--cream); color:var(--forest);}
  .footer-brand .logo .tagchip::after{border-color:var(--cream); background:var(--forest-deep);}
  .footer-brand p{font-size:13.5px; color:var(--sage); max-width:260px; margin-top:16px; line-height:1.6;}
  footer h4{font-family:'Manrope'; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--sage); margin-bottom:16px; font-weight:700;}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
  footer ul a{font-size:14px; color:rgba(253,252,240,0.85); transition:color .2s;}
  footer ul a:hover{color:var(--honey);}
  .footer-bottom{
    margin-top:60px; padding-top:26px; border-top:1px solid var(--line-dark);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:12.5px; color:var(--sage);
  }

/* ---------- LOGO IMAGE (replaces text chip) ---------- */
.logo-mark{width:32px;height:32px;border-radius:9px;overflow:hidden; flex-shrink:0; display:flex;}
.logo-mark img{width:100%;height:100%;object-fit:cover;display:block;}
.footer-brand .logo-mark{width:32px;height:32px;}

/* ---------- LANGUAGE SWITCHER ---------- */
.lang-switch{position:relative;}
.lang-switch button{
  display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--ink-soft);
  background:none; border:1px solid var(--line); padding:8px 12px; border-radius:100px; cursor:pointer; font-family:'Manrope';
}
.lang-switch button:hover{border-color:var(--forest); color:var(--forest);}
.lang-switch .menu{
  position:absolute; top:calc(100% + 8px); right:0; background:var(--cream); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 20px 40px -20px rgba(15,42,29,0.35); padding:6px; min-width:160px; display:none; z-index:200;
}
.lang-switch.open .menu{display:block;}
.lang-switch .menu a{
  display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-radius:9px; font-size:13.5px; color:var(--ink);
}
.lang-switch .menu a:hover{background:var(--cream-dim); color:var(--forest);}
.lang-switch .menu a.active{color:var(--forest); font-weight:700;}
.footer-lang{margin-top:18px;}
.footer-lang .menu-inline{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.footer-lang .menu-inline a{
  font-size:12.5px; padding:6px 12px; border-radius:100px; border:1px solid var(--line-dark); color:rgba(253,252,240,0.85);
}
.footer-lang .menu-inline a.active{background:var(--cream); color:var(--forest); font-weight:700; border-color:var(--cream);}

/* ---------- LEGAL PAGES (privacy / terms / legal-notice / account-deletion) ---------- */
.legal-hero{padding:64px 0 24px;}
.legal-hero .kicker{font-size:12px; color:var(--honey-deep); margin-bottom:14px; display:block;}
.legal-hero h1{font-size:clamp(34px,5vw,52px); color:var(--forest);}
.legal-hero .updated{margin-top:14px; font-size:13px; color:var(--ink-soft);}
.legal-body{padding:20px 0 100px;}
.legal-grid{display:block;}
.legal-content{max-width:720px; margin:0 auto;}
.legal-content section{padding:34px 0; border-top:1px solid var(--line);}
.legal-content section:first-child{border-top:none; padding-top:0;}
.legal-content h2{font-size:26px; color:var(--forest); margin-bottom:14px; scroll-margin-top:96px;}
.legal-content h3{font-size:18px; font-family:'Manrope'; font-weight:700; color:var(--forest); margin:18px 0 8px;}
.legal-content p{font-size:15px; line-height:1.7; color:var(--ink-soft); margin:0 0 12px;}
.legal-content ul{margin:0 0 12px; padding-left:20px; color:var(--ink-soft); font-size:15px; line-height:1.7;}
.legal-content li{margin-bottom:6px;}
.legal-content strong{color:var(--ink); font-weight:700;}
.legal-content a.inline-link{color:var(--forest); font-weight:700; border-bottom:1.5px solid var(--honey);}
.legal-content a.inline-link:hover{color:var(--honey-deep);}
.contact-card{background:var(--cream-dim); border:1px solid var(--line); border-radius:16px; padding:22px 26px; margin-top:8px;}
.contact-card .mono{font-size:11px; color:var(--honey-deep); display:block; margin-bottom:8px;}
.contact-card a{font-size:15px; font-weight:700; color:var(--forest);}
.callout-box{background:var(--forest); color:var(--cream); border-radius:16px; padding:24px 26px; margin:0 0 14px;}
.callout-box p{color:var(--cream); margin:0;}
.callout-box strong{color:var(--honey);}
.breadcrumb{font-size:12.5px; color:var(--ink-soft); margin-bottom:18px;}
.breadcrumb a{color:var(--ink-soft); font-weight:600;}
.breadcrumb a:hover{color:var(--forest);}

/* ---------- FAQ / SUPPORT ---------- */
.faq-list{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:var(--cream-dim); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; color:var(--forest); font-size:15.5px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:22px; color:var(--honey-deep); font-weight:400; flex-shrink:0;}
.faq-item[open] summary::after{content:'–';}
.faq-item .faq-body{padding:0 24px 22px; font-size:14.5px; line-height:1.7; color:var(--ink-soft);}

/* ---------- CONTACT ---------- */
.contact-grid{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.contact-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--cream-dim);
  border:1px solid var(--line); border-radius:16px; padding:22px 26px;
}
.contact-row .label{font-size:12px; color:var(--honey-deep); text-transform:uppercase; letter-spacing:0.06em; font-family:'IBM Plex Mono'; display:block; margin-bottom:6px;}
.contact-row .desc{font-size:14.5px; color:var(--ink-soft);}
.contact-row .value{font-size:15px; font-weight:700; color:var(--forest);}

/* ---------- BLOG ---------- */
.blog-empty{max-width:560px; margin:60px auto; text-align:center;}
.blog-empty h2{font-size:28px; color:var(--forest); margin-bottom:14px;}
.blog-empty p{font-size:15px; color:var(--ink-soft); line-height:1.7;}
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:960px; margin:0 auto;}
@media(max-width:760px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{background:var(--cream-dim); border:1px solid var(--line); border-radius:20px; padding:26px; transition:transform .2s;}
.blog-card:hover{transform:translateY(-3px);}
.blog-card .tag{font-size:11px; color:var(--honey-deep); text-transform:uppercase; letter-spacing:0.06em; font-family:'IBM Plex Mono'; margin-bottom:10px; display:block;}
.blog-card h3{font-size:21px; color:var(--forest); margin-bottom:8px;}
.blog-card p{font-size:14px; color:var(--ink-soft); line-height:1.6;}