:root{
  --purple:#5B48D9;
  --purple-dark:#30236f;
  --teal:#04D9C4;
  --ink:#151419;
  --muted:#696870;
  --paper:#FBFAF7;
  --paper-2:#F4F1EB;
  --surface:#FFFFFF;
  --danger:#e54f5d;
  --radius:26px;
  --shadow:0 20px 70px rgba(30,24,70,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
img{display:block;width:100%;height:100%;object-fit:cover}
::selection{background:var(--teal);color:var(--ink)}

.noise{
  pointer-events:none;
  position:fixed; inset:0; z-index:999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:1000;
  transform-origin:left;background:linear-gradient(90deg,var(--purple),var(--teal));
  transform:scaleX(0);
}
.nav{
  position:fixed;z-index:80;top:0;left:0;width:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 34px;
  transition:color .25s ease,background .25s ease,backdrop-filter .25s ease;
}
.nav.scrolled{
  background:rgba(251,250,247,.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(21,20,25,.08);
}
.logo{
  font-size:22px;font-weight:850;letter-spacing:-.06em;
  display:inline-flex;align-items:center;gap:10px;
}
.logo-dot{width:11px;height:11px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 5px rgba(4,217,196,.16)}
.navlinks{display:flex;gap:28px;font-size:13px;font-weight:700}
.navright{justify-self:end;display:flex;gap:10px;align-items:center}
.pill{
  border:1px solid rgba(21,20,25,.14);background:rgba(255,255,255,.62);
  border-radius:999px;padding:11px 16px;font-weight:800;font-size:12px;
  transition:transform .2s ease,background .2s ease;
}
.pill:hover{transform:translateY(-2px)}
.pill.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.mobile-menu{display:none;border:0;background:none;font-weight:800}

.hero{
  min-height:100svh;padding:130px 5vw 54px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:7vw;align-items:center;position:relative;overflow:hidden;
}
.hero-bgword{
  position:absolute;z-index:0;left:-2vw;bottom:-6vw;
  font-size:23vw;font-weight:900;letter-spacing:-.09em;line-height:.75;
  color:rgba(91,72,217,.055);white-space:nowrap;pointer-events:none;
}
.hero-copy{position:relative;z-index:3;max-width:800px}
.eyebrow{
  display:flex;gap:12px;align-items:center;font-size:12px;font-weight:850;
  text-transform:uppercase;letter-spacing:.13em;margin-bottom:28px;
}
.eyebrow::before{content:"";width:38px;height:2px;background:var(--teal)}
h1{
  font-size:clamp(62px,8.4vw,145px);line-height:.83;letter-spacing:-.075em;
  margin:0;font-weight:850;max-width:950px;
}
.hero-accent{color:var(--purple);display:block}
.hero-sub{
  max-width:620px;font-size:clamp(17px,1.55vw,24px);line-height:1.48;
  color:var(--muted);margin:35px 0 34px;
}
.trustline{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:750}
.trustline span{display:flex;gap:8px;align-items:center}
.trustline i{width:7px;height:7px;border-radius:50%;background:var(--teal);display:inline-block}

.hero-visual{
  position:relative;z-index:2;height:min(72vh,790px);min-height:560px;
}
.photo-shell{
  position:absolute;inset:0;border-radius:38px;overflow:hidden;box-shadow:var(--shadow);
  transform:rotate(1.7deg);
}
.photo-shell::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(20,15,44,.38));
}
.hero-photo{transform:scale(1.08);transition:transform .2s linear}
.pet-tag{
  position:absolute;z-index:5;left:-28px;bottom:80px;
  background:var(--teal);padding:18px 20px;border-radius:18px;font-weight:900;
  transform:rotate(-4deg);box-shadow:var(--shadow);
}
.ask-card{
  position:absolute;z-index:7;right:-3vw;bottom:-10px;width:min(430px,85%);
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
  padding:18px;border-radius:28px;box-shadow:0 25px 100px rgba(36,25,101,.22);
  transform:rotate(-1deg);
}
.ask-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ask-top strong{font-size:13px}
.animal-select{font-size:12px;background:var(--paper-2);padding:8px 10px;border-radius:999px}
.ask-card textarea{
  width:100%;resize:none;height:104px;border:0;background:#f5f4f0;border-radius:17px;
  padding:15px;outline:none;font-size:14px;line-height:1.45;
}
.ask-actions{display:flex;gap:8px;margin-top:10px}
.ask-actions button{border:0;border-radius:13px;padding:12px 14px;font-weight:850}
.voice{background:#edeafc;color:var(--purple)}
.send{flex:1;background:var(--purple);color:white}
.scrollcue{
  position:absolute;bottom:26px;left:5vw;font-size:11px;font-weight:850;
  letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:12px;
}
.scrollcue .line{height:1px;width:55px;background:var(--ink);position:relative;overflow:hidden}
.scrollcue .line::after{
  content:"";position:absolute;inset:0;background:var(--teal);transform:translateX(-100%);
  animation:cue 2.1s infinite ease-in-out;
}
@keyframes cue{50%{transform:translateX(100%)}100%{transform:translateX(100%)}}

.statement{
  min-height:86vh;padding:10vw 5vw;display:flex;align-items:center;position:relative;overflow:hidden;
}
.statement h2{
  margin:0;font-size:clamp(58px,10vw,170px);line-height:.82;letter-spacing:-.078em;font-weight:860;
}
.statement .outline{-webkit-text-stroke:1.5px var(--ink);color:transparent}
.statement .tiny{
  position:absolute;right:7vw;bottom:10vw;max-width:360px;color:var(--muted);
  font-size:16px;line-height:1.55;
}

/* SCROLL STORY */
.story-wrap{height:520vh;position:relative;background:#14131a}
.story{
  position:sticky;top:0;height:100svh;overflow:hidden;color:white;background:#14131a;
}
.story-bg{position:absolute;inset:0}
.story-layer{
  position:absolute;inset:0;opacity:0;will-change:opacity,transform,clip-path;
}
.story-layer img{filter:saturate(.9) contrast(1.02)}
.story-layer::after{
  content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(12,10,19,.82) 0%,rgba(12,10,19,.48) 43%,rgba(12,10,19,.1) 75%),
  linear-gradient(0deg,rgba(12,10,19,.4),transparent 50%);
}
.story-ui{position:absolute;inset:0;z-index:10;pointer-events:none}
.story-step{
  position:absolute;left:5vw;top:50%;transform:translateY(-50%);
  width:min(700px,58vw);opacity:0;will-change:transform,opacity;
}
.step-no{font-size:12px;letter-spacing:.15em;font-weight:900;color:var(--teal);margin-bottom:22px}
.story-step h3{
  margin:0;font-size:clamp(55px,7.2vw,122px);line-height:.87;letter-spacing:-.075em;
}
.story-step p{font-size:clamp(16px,1.6vw,23px);max-width:570px;line-height:1.48;color:rgba(255,255,255,.76)}
.story-counter{
  position:absolute;right:34px;bottom:28px;font-size:12px;font-weight:850;letter-spacing:.12em;
}
.story-progress{
  position:absolute;right:35px;top:50%;transform:translateY(-50%);
  height:230px;width:2px;background:rgba(255,255,255,.18);overflow:hidden
}
.story-progress span{display:block;width:100%;height:100%;background:var(--teal);transform-origin:top;transform:scaleY(0)}

.query-float{
  position:absolute;right:5vw;top:23%;width:min(470px,38vw);background:white;color:var(--ink);
  padding:24px;border-radius:25px;box-shadow:0 30px 100px rgba(0,0,0,.35);opacity:0;transform:translateY(80px) rotate(2deg);
}
.query-label{font-size:11px;font-weight:900;color:var(--purple);text-transform:uppercase;letter-spacing:.1em}
.query-text{font-size:19px;line-height:1.48;margin:12px 0 18px;min-height:110px}
.typing::after{content:"|";animation:blink .7s infinite}
@keyframes blink{50%{opacity:0}}
.query-meta{display:flex;gap:7px;flex-wrap:wrap}
.tag{background:#f0eefc;color:var(--purple-dark);font-size:11px;font-weight:850;padding:8px 10px;border-radius:999px}

.phone{
  position:absolute;right:6vw;top:50%;width:min(390px,33vw);aspect-ratio:.57;
  background:#0b0b0d;border:7px solid #0b0b0d;border-radius:45px;
  box-shadow:0 40px 130px rgba(0,0,0,.48);overflow:hidden;
  transform:translateY(-40%) scale(.77) rotate(5deg);opacity:0;
}
.phone-screen{position:absolute;inset:7px;background:#f6f5f1;border-radius:34px;color:var(--ink);padding:44px 16px 16px;overflow:hidden}
.phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:100px;height:22px;background:#0b0b0d;border-radius:99px;z-index:3}
.mini-logo{font-weight:900;letter-spacing:-.04em;font-size:17px}
.answer-card{background:white;border-radius:18px;padding:16px;margin-top:17px;box-shadow:0 6px 22px rgba(37,28,92,.08)}
.answer-card small{font-weight:900;color:var(--purple)}
.answer-card h4{margin:8px 0 6px;font-size:18px}
.answer-card p{margin:0;color:#65646b;font-size:12px;line-height:1.5}
.answer-row{display:grid;grid-template-columns:8px 1fr;gap:10px;margin-top:12px;font-size:12px;line-height:1.42}
.answer-row .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:5px}
.answer-row.warn .dot{background:#f2a13b}
.skeleton{height:11px;border-radius:10px;background:#eceae5;margin:9px 0;overflow:hidden}
.skeleton:after{content:"";display:block;height:100%;width:45%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(300%)}}

.alert-panel{
  position:absolute;inset:0;display:flex;align-items:center;padding:5vw;
  background:var(--danger);opacity:0;transform:scale(1.08);
}
.alert-panel::after{
  content:"!";position:absolute;right:-2vw;bottom:-14vw;font-size:42vw;
  line-height:.7;font-weight:950;color:rgba(255,255,255,.10);
}
.alert-copy{position:relative;z-index:3;max-width:950px}
.alert-copy .urgent{font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.alert-copy h3{font-size:clamp(68px,10vw,170px);line-height:.8;letter-spacing:-.08em;margin:28px 0}
.alert-copy p{font-size:20px;line-height:1.45;max-width:720px}
.alert-signs{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.alert-signs span{border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:10px 14px;font-size:12px;font-weight:850}

.species{padding:11vw 5vw 8vw}
.section-kicker{font-size:12px;font-weight:900;color:var(--purple);text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px}
.section-title{
  max-width:1100px;font-size:clamp(52px,7.5vw,120px);line-height:.88;
  letter-spacing:-.07em;margin:0 0 6vw;font-weight:860;
}
.pet-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
.pet-card{
  min-height:610px;border-radius:32px;overflow:hidden;position:relative;background:#ddd;
  isolation:isolate;
}
.pet-card.small{min-height:430px}
.pet-card img{transition:transform .8s cubic-bezier(.2,.7,.2,1);transform:scale(1.02)}
.pet-card:hover img{transform:scale(1.08)}
.pet-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,10,20,.63),transparent 60%);z-index:1}
.pet-copy{position:absolute;left:26px;right:26px;bottom:25px;z-index:2;color:white}
.pet-copy small{font-weight:800;opacity:.72}
.pet-copy h3{font-size:clamp(38px,5vw,75px);letter-spacing:-.065em;margin:5px 0 8px;line-height:.9}
.pet-copy p{max-width:460px;margin:0;color:rgba(255,255,255,.78);font-size:14px;line-height:1.5}
.pet-stack{display:grid;gap:22px}

.care{padding:7vw 5vw 11vw}
.care-stage{
  background:var(--purple);color:white;border-radius:42px;min-height:720px;
  position:relative;overflow:hidden;padding:5vw;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;
}
.care-stage::before{
  content:"";position:absolute;width:65vw;height:65vw;border:1px solid rgba(255,255,255,.18);
  border-radius:50%;right:-26vw;top:-25vw;
}
.care-copy{position:relative;z-index:2}
.care-copy h2{font-size:clamp(56px,7vw,110px);letter-spacing:-.075em;line-height:.86;margin:0 0 28px}
.care-copy p{font-size:19px;line-height:1.55;color:rgba(255,255,255,.78);max-width:560px}
.care-list{margin-top:38px;display:grid;gap:14px}
.care-list div{display:flex;align-items:center;gap:12px;font-weight:780}
.care-list b{display:grid;place-items:center;width:29px;height:29px;background:var(--teal);color:var(--ink);border-radius:50%}
.care-phone{
  position:relative;z-index:2;background:#f8f7f3;color:var(--ink);border-radius:38px;
  width:min(430px,95%);justify-self:center;padding:24px;box-shadow:0 35px 100px rgba(20,8,73,.32);
  transform:rotate(3deg);
}
.profile-head{display:flex;align-items:center;gap:13px}
.profile-pic{width:56px;height:56px;border-radius:18px;overflow:hidden}
.profile-head strong{display:block;font-size:18px}
.profile-head small{color:var(--muted)}
.score{margin:25px 0 13px;padding:18px;background:#ece9ff;border-radius:20px}
.score small{font-weight:850;color:var(--purple)}
.score strong{display:block;font-size:33px;letter-spacing:-.05em;margin-top:4px}
.plan-item{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid #dedcd7}
.plan-icon{width:39px;height:39px;background:#eafbf8;border-radius:14px;display:grid;place-items:center;font-size:18px}
.plan-item strong{font-size:13px}.plan-item small{display:block;color:var(--muted);margin-top:4px}

.safety{padding:10vw 5vw;background:#111016;color:white}
.safety-top{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end}
.safety h2{font-size:clamp(62px,8.3vw,136px);letter-spacing:-.08em;line-height:.82;margin:0}
.safety-intro{font-size:19px;line-height:1.6;color:rgba(255,255,255,.68);max-width:600px}
.safety-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16);margin-top:7vw;border:1px solid rgba(255,255,255,.16)}
.safety-card{background:#111016;padding:30px;min-height:250px}
.safety-card .num{color:var(--teal);font-size:11px;font-weight:900}
.safety-card h3{font-size:25px;letter-spacing:-.04em;margin:60px 0 12px}
.safety-card p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.58);margin:0}

.articles{padding:10vw 5vw}
.articles-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:4vw}
.articles-head h2{font-size:clamp(50px,7vw,105px);line-height:.86;letter-spacing:-.07em;margin:0}
.articles-link{font-size:12px;font-weight:900;border-bottom:1px solid;padding-bottom:6px}
.article-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:20px}
.article{display:block}
.article-img{height:450px;border-radius:28px;overflow:hidden}
.article:not(:first-child) .article-img{height:330px}
.article-img img{transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.article:hover img{transform:scale(1.07)}
.article small{display:block;color:var(--purple);font-weight:850;margin:16px 0 8px}
.article h3{font-size:24px;line-height:1.12;letter-spacing:-.04em;margin:0;max-width:500px}
.article:first-child h3{font-size:34px}

.final{
  min-height:100svh;background:var(--teal);padding:10vw 5vw 5vw;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;
}
.final::after{
  content:"?";position:absolute;font-size:80vw;right:-12vw;top:-22vw;line-height:1;color:rgba(255,255,255,.18);font-weight:950;
}
.final-copy{position:relative;z-index:2}
.final small{font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.final h2{font-size:clamp(74px,13vw,220px);line-height:.75;letter-spacing:-.085em;margin:25px 0 55px;max-width:1200px}
.final-ask{display:flex;max-width:820px;position:relative;z-index:2;background:white;border-radius:999px;padding:8px 8px 8px 26px;align-items:center}
.final-ask input{border:0;outline:0;flex:1;font-size:17px;min-width:0}
.final-ask button{border:0;background:var(--purple);color:white;font-weight:900;border-radius:999px;padding:17px 25px}
.footer{position:relative;z-index:2;margin-top:9vw;display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:800}

.reveal{opacity:0;transform:translateY(50px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

.demo-toast{
  position:fixed;z-index:2000;right:24px;bottom:24px;background:#111;color:#fff;
  padding:16px 18px;border-radius:16px;box-shadow:var(--shadow);font-size:13px;
  opacity:0;transform:translateY(20px);pointer-events:none;transition:.25s ease;
}
.demo-toast.show{opacity:1;transform:none}

@media(max-width:1000px){
  .nav{grid-template-columns:1fr auto;padding:18px 20px}
  .navlinks{display:none}.navright .pill:not(.primary){display:none}.mobile-menu{display:block}
  .nav.menu-open{background:rgba(251,250,247,.97);backdrop-filter:blur(18px);border-bottom:1px solid rgba(21,20,25,.08)}
  .nav.menu-open .navlinks{
    position:absolute;z-index:1;top:100%;left:20px;right:20px;
    display:flex;flex-direction:column;gap:0;padding:10px;
    background:rgba(255,255,255,.98);border:1px solid rgba(21,20,25,.1);
    border-radius:18px;box-shadow:0 22px 60px rgba(30,24,70,.16)
  }
  .nav.menu-open .navlinks a{padding:13px 14px;border-radius:11px;min-height:44px;display:flex;align-items:center}
  .nav.menu-open .navlinks a:hover,.nav.menu-open .navlinks a:focus-visible{background:#f0edff}
  .hero{grid-template-columns:1fr;padding:110px 22px 70px;gap:45px}
  .hero-visual{min-height:590px;height:72vh}
  .ask-card{right:0}
  .scrollcue{display:none}
  .statement{padding:100px 22px}
  .statement .tiny{position:static;margin-top:45px}
  .story-step{left:22px;width:calc(100% - 44px);top:25%;transform:none}
  .query-float{left:22px;right:22px;top:auto;bottom:26px;width:auto}
  .phone{width:310px;right:22px;top:45%}
  .story-progress{right:14px}
  .story-counter{right:16px}
  .species,.care,.safety,.articles{padding-left:22px;padding-right:22px}
  .pet-grid{grid-template-columns:1fr}
  .pet-stack{grid-template-columns:1fr 1fr}
  .care-stage{grid-template-columns:1fr;padding:60px 26px}
  .safety-top{grid-template-columns:1fr}
  .safety-grid{grid-template-columns:1fr 1fr}
  .article-grid{grid-template-columns:1fr 1fr}
  .article:first-child{grid-column:1/-1}
}
@media(max-width:640px){
  .navright .primary{padding:10px 13px}
  h1{font-size:64px}
  .hero-sub{font-size:17px}
  .hero-visual{min-height:510px;height:65vh}
  .photo-shell{border-radius:28px}
  .pet-tag{left:-5px;bottom:128px}
  .ask-card{width:95%;bottom:-16px}
  .statement{min-height:70vh}
  .story-wrap{height:470vh}
  .story-step{top:18%}
  .story-step h3{font-size:58px}
  .story-step p{font-size:15px;max-width:90%}
  .query-float{bottom:20px;padding:18px}
  .query-text{font-size:16px;min-height:80px}
  .phone{right:50%;transform:translate(50%,-28%) scale(.72);width:330px}
  .alert-copy h3{font-size:69px}
  .pet-stack{grid-template-columns:1fr}
  .pet-card,.pet-card.small{min-height:470px}
  .care-stage{border-radius:28px}
  .care-phone{transform:none}
  .safety-grid{grid-template-columns:1fr}
  .safety-card{min-height:190px}
  .safety-card h3{margin-top:35px}
  .article-grid{grid-template-columns:1fr}
  .article:first-child{grid-column:auto}
  .article-img,.article:not(:first-child) .article-img{height:320px}
  .final{padding:100px 22px 28px}
  .final h2{font-size:79px}
  .final-ask{border-radius:24px;padding:10px;display:grid;gap:8px}
  .final-ask input{padding:10px 8px}
  .final-ask button{width:100%}
  .footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* VISUAL-ONLY PRODUCT FLOW */
.flow-launcher{
  position:fixed;left:24px;bottom:24px;z-index:1500;display:flex;gap:8px;flex-wrap:wrap;
}
.flow-launcher button{
  border:0;background:#fff;color:var(--ink);box-shadow:0 12px 40px rgba(20,15,50,.15);
  border-radius:999px;padding:11px 14px;font-size:11px;font-weight:900;
}
.flow-launcher button.active{background:var(--purple);color:#fff}
.demo-modal{
  position:fixed;inset:0;z-index:1400;background:rgba(15,13,25,.62);backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;padding:22px;
}
.demo-modal.open{display:flex}
.demo-shell{
  width:min(1040px,100%);max-height:min(850px,92vh);overflow:auto;background:var(--paper);
  border-radius:34px;box-shadow:0 40px 130px rgba(0,0,0,.35);position:relative;
}
.demo-head{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;background:rgba(251,250,247,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.08);
}
.demo-head strong{font-size:15px}
.demo-close{border:0;background:#111;color:#fff;border-radius:50%;width:36px;height:36px;font-weight:900}
.demo-body{padding:28px}
.flow-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.flow-tab{border:1px solid #d9d6cf;background:#fff;border-radius:999px;padding:10px 13px;font-weight:850;font-size:12px}
.flow-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.flow-view{display:none}.flow-view.active{display:block}
.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.visual-card{background:#fff;border-radius:24px;padding:20px;box-shadow:0 10px 35px rgba(40,30,90,.07)}
.visual-card h3{margin:0 0 8px;font-size:24px;letter-spacing:-.04em}
.visual-card p{color:var(--muted);font-size:13px;line-height:1.5}
.mock-field,.mock-select,.mock-area{
  width:100%;border:1px solid #ddd9d1;background:#faf9f6;border-radius:15px;padding:13px 14px;margin-top:10px;font-size:13px;
}
.mock-area{min-height:105px}
.mock-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mock-actions{display:flex;gap:8px;margin-top:14px}
.mock-btn{border:0;border-radius:14px;padding:12px 14px;font-weight:900}
.mock-btn.secondary{background:#ece9ff;color:var(--purple)}
.mock-btn.primary{background:var(--purple);color:#fff;flex:1}
.steps{display:flex;gap:7px;margin-bottom:18px}
.steps span{height:6px;flex:1;border-radius:999px;background:#dedbd4}
.steps span.on{background:var(--purple)}
.result-hero{background:linear-gradient(135deg,#ece9ff,#e9fbf8);padding:24px;border-radius:24px;margin-bottom:16px}
.result-badge{display:inline-flex;padding:8px 10px;border-radius:999px;background:#fff;font-weight:900;font-size:11px;color:var(--purple)}
.result-hero h3{font-size:34px;letter-spacing:-.05em;margin:12px 0 8px}
.result-list{display:grid;gap:10px}
.result-item{background:#fff;border-radius:18px;padding:16px}
.result-item strong{display:block;margin-bottom:5px}
.result-item small{color:var(--muted);line-height:1.5}
.urgent-demo{background:var(--danger);color:#fff;border-radius:25px;padding:28px}
.urgent-demo h3{font-size:44px;letter-spacing:-.055em;line-height:.95;margin:10px 0}
.urgent-demo p{color:rgba(255,255,255,.8);line-height:1.5}
.email-unlock{display:grid;grid-template-columns:1fr auto;gap:8px}
.care-demo{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}
.care-demo .avatar{width:110px;height:110px;border-radius:24px;overflow:hidden}
.loading-demo{display:grid;place-items:center;text-align:center;padding:55px 20px}
.loader-ring{width:74px;height:74px;border:7px solid #e5e1da;border-top-color:var(--purple);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:18px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){
  .visual-grid{grid-template-columns:1fr}.mock-row{grid-template-columns:1fr}
  .flow-launcher{left:12px;right:12px;bottom:12px}.flow-launcher button{flex:1}
  .demo-body{padding:18px}.demo-shell{border-radius:24px}
  .care-demo{grid-template-columns:75px 1fr}.care-demo .avatar{width:75px;height:75px;border-radius:18px}
}


/* PRODUCT-FIRST REVISION */
.hero{
  min-height:100svh;
  grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr);
  gap:5vw;
}
.hero-copy{align-self:center}
.hero-sub{max-width:560px}
.hero-visual{
  min-height:620px;
  height:min(76vh,820px);
}
.photo-shell{
  inset:0 0 0 18%;
  border-radius:38px;
}
.photo-shell::after{
  background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(20,15,44,.36));
}
.pet-tag{left:4%;bottom:70px}
.ask-card{
  left:0;
  right:auto;
  top:7%;
  bottom:auto;
  width:min(560px,88%);
  padding:22px;
  border-radius:30px;
  transform:rotate(-1deg);
}
.ask-card::before{
  content:"PORADNA";
  position:absolute;
  top:-13px;left:25px;
  background:var(--teal);
  color:var(--ink);
  padding:7px 11px;
  border-radius:999px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
}
.ask-top{margin-bottom:15px}
.ask-top strong{font-size:16px}
.ask-mode-switch{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-bottom:13px;
}
.ask-mode-switch button{
  border:1px solid #ddd9d1;
  background:#f7f6f2;
  border-radius:13px;
  padding:10px 8px;
  font-size:11px;
  font-weight:900;
}
.ask-mode-switch button.active{
  background:var(--ink);
  border-color:var(--ink);
  color:white;
}
.ask-card textarea{height:132px;font-size:15px}
.ask-hints{
  margin-top:10px;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.ask-hints span{
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  padding:7px 9px;
  border:1px solid #e0ddd6;
  border-radius:999px;
}
.ask-actions button{padding:14px 15px}
.send{font-size:13px}

.advisor-gateway{
  padding:28px 5vw 55px;
  position:relative;
  z-index:5;
}
.gateway-shell{
  max-width:1500px;
  margin:0 auto;
  background:#fff;
  border-radius:30px;
  padding:18px;
  box-shadow:0 20px 70px rgba(30,24,70,.09);
  display:grid;
  grid-template-columns:1.1fr repeat(3,.8fr);
  gap:10px;
}
.gateway-intro{
  padding:22px 24px;
}
.gateway-intro small{
  display:block;
  color:var(--purple);
  font-weight:950;
  letter-spacing:.11em;
  font-size:10px;
  margin-bottom:7px;
}
.gateway-intro strong{
  display:block;
  font-size:25px;
  letter-spacing:-.045em;
}
.gateway-option{
  border:0;
  text-align:left;
  padding:20px;
  border-radius:22px;
  background:#f5f4f0;
  transition:.25s ease;
  color:var(--ink);
}
.gateway-option:hover{
  background:#ece9ff;
  transform:translateY(-3px);
}
.gateway-option b{
  display:block;
  font-size:15px;
  margin:8px 0 5px;
}
.gateway-option span{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.gateway-icon{
  display:grid;
  place-items:center;
  width:37px;height:37px;
  border-radius:13px;
  background:#fff;
  font-size:17px;
}
.gateway-option.primary{
  background:var(--purple);
  color:white;
}
.gateway-option.primary span{color:rgba(255,255,255,.72)}
.gateway-option.primary .gateway-icon{color:var(--purple)}

.statement{min-height:72vh}

.navright .pill.primary{
  box-shadow:0 8px 25px rgba(21,20,25,.14);
}

@media(max-width:1100px){
  .hero{grid-template-columns:1fr;padding-bottom:50px}
  .hero-copy{padding-right:10vw}
  .hero-visual{min-height:650px;height:72vh}
  .photo-shell{inset:0 0 0 12%}
  .ask-card{width:min(590px,91%);top:8%}
  .gateway-shell{grid-template-columns:1fr 1fr}
  .gateway-intro{grid-column:1/-1}
}
@media(max-width:640px){
  .hero{padding-top:100px;gap:30px}
  .hero-copy{padding-right:0}
  .hero-visual{min-height:590px;height:68vh}
  .photo-shell{inset:13% 0 0 10%}
  .ask-card{top:0;width:97%;padding:18px}
  .ask-mode-switch{grid-template-columns:1fr 1fr}
  .ask-mode-switch button:last-child{grid-column:1/-1}
  .ask-card textarea{height:108px}
  .pet-tag{display:none}
  .advisor-gateway{padding:10px 14px 42px}
  .gateway-shell{grid-template-columns:1fr;padding:10px;border-radius:24px}
  .gateway-intro{grid-column:auto;padding:17px}
  .statement{min-height:62vh}
}


/* CURRENT-LIVE PRODUCT LOGIC — visual-only */
.ask-paths{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-bottom:8px;
}
.ask-path{
  border:1px solid #ddd9d1;
  background:#f7f6f2;
  border-radius:13px;
  padding:10px 11px;
  font-size:11px;
  font-weight:900;
  text-align:left;
}
.ask-path.active{background:var(--purple);border-color:var(--purple);color:#fff}
.ask-mode-switch.health-modes{grid-template-columns:1fr 1fr;margin-bottom:12px}
.ask-mode-switch.health-modes button:last-child{grid-column:auto}
.ask-context{
  font-size:10px;
  line-height:1.45;
  color:var(--muted);
  margin:0 2px 9px;
}
.gateway-shell.current-logic{
  grid-template-columns:1.05fr 1.3fr .9fr;
}
.gateway-health{
  background:var(--purple);
  color:#fff;
  border-radius:22px;
  padding:20px;
}
.gateway-health small{
  display:block;
  font-size:10px;
  line-height:1.35;
  color:rgba(255,255,255,.72);
  margin:7px 0 13px;
}
.gateway-health-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.gateway-suboption{
  border:0;
  text-align:left;
  padding:13px;
  border-radius:15px;
  background:rgba(255,255,255,.13);
  color:#fff;
}
.gateway-suboption:hover{background:rgba(255,255,255,.2)}
.gateway-suboption b{display:block;font-size:12px;margin-bottom:4px}
.gateway-suboption span{font-size:10px;color:rgba(255,255,255,.67);line-height:1.35}
.gateway-care{
  background:#f5f4f0;
  border:0;
  text-align:left;
  padding:20px;
  border-radius:22px;
  color:var(--ink);
  transition:.25s ease;
}
.gateway-care:hover{background:#e9fbf8;transform:translateY(-3px)}
.gateway-care b{display:block;font-size:15px;margin:9px 0 5px}
.gateway-care span{font-size:11px;line-height:1.45;color:var(--muted)}
.current-note{
  margin-top:11px;
  padding:11px 13px;
  border-radius:13px;
  background:#f7f6f2;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.current-note strong{color:var(--ink)}
.text-chip-row{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.text-chip{
  border:1px solid #dcd8d1;
  background:#faf9f6;
  border-radius:999px;
  padding:8px 10px;
  font-size:11px;
  font-weight:800;
}
.text-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.field-label-demo{
  display:block;
  margin-top:12px;
  margin-bottom:4px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  color:#625e69;
}
.ext-stepper{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin:16px 0 18px;
}
.ext-step{
  border:0;
  background:#efede8;
  border-radius:12px;
  padding:9px 7px;
  font-size:10px;
  line-height:1.2;
  font-weight:850;
  color:#76727b;
}
.ext-step.active{background:var(--purple);color:#fff}
.ext-panel{display:none}
.ext-panel.active{display:block}
.ext-panel .mock-row{margin-top:8px}
.consent-line{
  margin-top:12px;
  padding:12px;
  border:1px solid #e0dcd4;
  border-radius:13px;
  display:flex;
  gap:8px;
  font-size:11px;
  line-height:1.4;
  color:var(--muted);
}
.fake-check{
  width:16px;height:16px;min-width:16px;
  border:1px solid #bbb5ad;border-radius:4px;background:#fff;
}
.care-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.care-focus{
  margin-top:12px;
  background:#e9fbf8;
  border-radius:16px;
  padding:14px;
}
.care-focus strong{display:block;font-size:12px;margin-bottom:4px}
.care-focus span{font-size:11px;color:#4b736e;line-height:1.45}
@media(max-width:1100px){
  .gateway-shell.current-logic{grid-template-columns:1fr 1fr}
  .gateway-intro{grid-column:1/-1}
}
@media(max-width:700px){
  .gateway-shell.current-logic{grid-template-columns:1fr}
  .gateway-intro{grid-column:auto}
  .gateway-health-options,.care-form-grid{grid-template-columns:1fr}
  .ext-stepper{grid-template-columns:1fr 1fr}
  .ext-step:last-child{grid-column:1/-1}
}


/* LIGHTER CANVAS REVISION */
body{background:#FBFAF7}
.hero{background:#FBFAF7}
.statement{background:#FFFFFF}
.advisor-gateway{background:#FBFAF7}
.species{background:#FBFAF7}
.care{background:#FFFFFF}
.articles{background:#FBFAF7}
.ask-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(35,30,55,.07);
}
.gateway-shell{
  background:#FFFFFF;
  border:1px solid rgba(35,30,55,.06);
}
.hero-bgword{color:rgba(91,72,217,.038)}
.photo-shell{
  background:#EDEBE6;
}


.hero-photo{
  object-position:50% 45%;
}


/* STRONGER ADVISOR EMPHASIS */
.ask-card{
  background:#FFFFFF !important;
  border:2px solid rgba(91,72,217,.20) !important;
  box-shadow:
    0 30px 90px rgba(54,42,125,.22),
    0 8px 28px rgba(30,24,70,.10) !important;
  padding:26px !important;
  border-radius:30px !important;
}
.ask-card::before{
  background:var(--purple) !important;
  color:#fff !important;
  padding:8px 13px !important;
  box-shadow:0 8px 22px rgba(91,72,217,.24);
}
.ask-top{
  padding-bottom:12px;
  margin-bottom:14px !important;
  border-bottom:1px solid rgba(91,72,217,.10);
}
.ask-top strong{
  font-size:18px !important;
  letter-spacing:-.02em;
}
.ask-paths{
  background:#F7F5FF;
  border:1px solid #E2DDFB;
  border-radius:16px;
  padding:6px;
}
.ask-path{
  background:transparent !important;
  border:0 !important;
  padding:12px 13px !important;
  border-radius:12px !important;
}
.ask-path.active{
  background:var(--purple) !important;
  color:#fff !important;
  box-shadow:0 7px 18px rgba(91,72,217,.20);
}
.ask-mode-switch.health-modes{
  margin-top:12px;
}
.ask-mode-switch.health-modes button{
  background:#F3F1EC;
  border-color:#E0DDD5;
  padding:11px 10px;
}
.ask-mode-switch.health-modes button.active{
  background:#ECE9FF;
  color:var(--purple);
  border-color:#BEB6F3;
}
.ask-context{
  font-size:11px !important;
  color:#5E5968 !important;
  margin-top:4px !important;
}
.ask-card textarea{
  background:#FBFAFF !important;
  border:2px solid #D9D3F4 !important;
  min-height:145px !important;
  border-radius:18px !important;
  padding:17px !important;
  font-size:15px !important;
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.ask-card textarea::placeholder{
  color:#8B8496;
}
.ask-card textarea:focus{
  outline:none;
  border-color:var(--purple) !important;
  box-shadow:0 0 0 4px rgba(91,72,217,.10) !important;
}
.ask-hints{
  margin-top:12px !important;
}
.ask-hints span{
  background:#F7F6F3;
  border-color:#E5E0D7 !important;
  color:#65616A !important;
}
.ask-actions{
  margin-top:14px !important;
}
.ask-actions .voice{
  background:#F0EDFF !important;
  color:var(--purple) !important;
  border:1px solid #DCD6FA;
}
.ask-actions .send{
  background:var(--purple) !important;
  color:#fff !important;
  padding:15px 18px !important;
  font-size:14px !important;
  box-shadow:0 12px 28px rgba(91,72,217,.25);
}
.ask-actions .send:hover{
  background:var(--purple-dark) !important;
  transform:translateY(-1px);
}
.hero-visual::before{
  content:"";
  position:absolute;
  left:-3%;
  top:3%;
  width:64%;
  height:76%;
  border-radius:38px;
  background:rgba(255,255,255,.55);
  filter:blur(20px);
  z-index:1;
  pointer-events:none;
}
.ask-card{
  z-index:9 !important;
}
@media(max-width:640px){
  .ask-card{
    padding:20px !important;
    border-width:1.5px !important;
  }
  .ask-top strong{font-size:16px !important}
  .ask-card textarea{min-height:120px !important}
}



/* V6 MERGE — ORIGINAL SECTIONS + CINEMATIC MOTION ONLY
   The visible information architecture remains the original V4 structure.
   These rules only strengthen image-led, video-like transitions. */
.story{isolation:isolate}
.story::before{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  box-shadow:inset 0 0 160px rgba(0,0,0,.34);
  background:linear-gradient(180deg,rgba(0,0,0,.05),transparent 20%,transparent 78%,rgba(0,0,0,.20));
}
.story-layer img{
  will-change:transform,filter;
  transform-origin:center center;
}
.story-layer{
  will-change:opacity,transform,clip-path,filter;
}
.story-step h3,.story-step p,.query-float,.phone{
  will-change:opacity,transform,filter;
}

/* Soft cinematic entrances for the ORIGINAL sections only. */
.cinematic-section{
  position:relative;
  transform-origin:50% 0%;
}
@supports (animation-timeline:view()) {
  .cinematic-section{
    animation:cinematicSectionIn linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 32%;
  }
  @keyframes cinematicSectionIn{
    from{opacity:.52;transform:translateY(5vh) scale(.985);filter:blur(7px)}
    to{opacity:1;transform:none;filter:blur(0)}
  }
}

/* Image cards behave like short moving shots rather than static tiles. */
.pet-card,.article-img,.care-phone,.photo-shell{overflow:hidden}
.pet-card img,.article-img img,.profile-pic img{
  will-change:transform;
}
@supports (animation-timeline:view()) {
  .pet-card img,.article-img img{
    animation:cinematicImageDrift linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes cinematicImageDrift{
    from{transform:scale(1.09) translateY(-1.5%)}
    50%{transform:scale(1.035) translateY(0)}
    to{transform:scale(1.09) translateY(1.5%)}
  }
}

/* Transition edge after the scroll-story: feels like a film dissolve, not a new section. */
.story-wrap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:30;pointer-events:none;
  background:linear-gradient(180deg,transparent,#14131a 54%,var(--paper) 100%);
  opacity:.92;
}
.species{position:relative;z-index:31}

/* Keep motion respectful on mobile and for reduced-motion users. */
@media(max-width:640px){
  .story::before{box-shadow:inset 0 0 80px rgba(0,0,0,.28)}
  .story-wrap::after{height:14vh}
}
@media(prefers-reduced-motion:reduce){
  .cinematic-section{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
}



/* v7 polish — gateway cards + sharper hero image */
.hero-photo{
  transform:scale(1.02);
  object-position:56% 50%;
  filter:saturate(1.03) contrast(1.02);
  backface-visibility:hidden;
  image-rendering:auto;
}
.photo-shell{
  background:linear-gradient(135deg,#e6ebe8,#f4f6f2);
}
.photo-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  pointer-events:none;
  z-index:2;
}
.gateway-health,
.gateway-care{
  position:relative;
  overflow:hidden;
}
.gateway-health{
  background:linear-gradient(180deg,#6c14ef 0%, #7b17f3 55%, #6a10e8 100%);
  box-shadow:0 20px 55px rgba(91,72,217,.18);
}
.gateway-care{
  background:linear-gradient(180deg,#f4f2ee 0%, #efede8 100%);
  border:1px solid rgba(32,26,52,.06);
}
.gateway-health::after,
.gateway-care::after{
  content:"";
  position:absolute;
  right:-55px;
  top:-55px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,255,255,.18), rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.gateway-care::after{
  background:radial-gradient(circle at center, rgba(4,217,196,.14), rgba(4,217,196,0) 68%);
}
.gateway-card-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.gateway-icon{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(20,15,50,.12);
}
.gateway-icon svg{
  width:22px;
  height:22px;
  display:block;
}
.gateway-icon-health{
  background:#fff;
  color:var(--purple);
}
.gateway-icon-care{
  background:#fff;
  color:var(--teal);
}
.gateway-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
}
.gateway-chip-light{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.gateway-chip-soft{
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(32,26,52,.08);
}
.gateway-health b,
.gateway-care b{
  font-size:17px;
  letter-spacing:-.03em;
}
.gateway-health small,
.gateway-care span{
  font-size:12px;
  line-height:1.55;
}
.gateway-health-options{
  margin-top:18px;
  gap:10px;
}
.gateway-suboption{
  padding:16px 14px;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(4px);
}
.gateway-suboption b{font-size:13px}
.gateway-suboption span{font-size:11px;line-height:1.45}
.gateway-care{
  padding:22px;
}
.gateway-care:hover{
  background:#ece9e3;
}
@media(max-width:640px){
  .gateway-icon{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:15px;
  }
  .gateway-chip{font-size:10px;padding:7px 10px}
  .gateway-health b,
  .gateway-care b{font-size:15px}
}



/* v9 — MOTION-FIRST POLISH
   Inspired by guided-attention motion: one focal movement at a time, not random animation. */
:root{
  --motion-ease:cubic-bezier(.18,.8,.18,1);
  --motion-spring:cubic-bezier(.2,1.25,.32,1);
}

/* Soft cursor halo guides attention on desktop. */
.motion-cursor{
  position:fixed;
  left:0;top:0;
  width:180px;height:180px;
  border-radius:50%;
  pointer-events:none;
  z-index:65;
  opacity:0;
  background:radial-gradient(circle,rgba(4,217,196,.13) 0%,rgba(91,72,217,.06) 36%,rgba(91,72,217,0) 70%);
  transform:translate3d(-50%,-50%,0) scale(.8);
  transition:opacity .35s ease,filter .35s ease;
  filter:blur(2px);
  mix-blend-mode:multiply;
}
body.pointer-active .motion-cursor{opacity:1}
body.pointer-over-action .motion-cursor{filter:blur(0);}

/* Hero arrives as a short title sequence. */
.hero{--hero-progress:0;perspective:1400px}
.hero-copy,.hero-visual{will-change:transform,opacity}
.motion-ready .hero .eyebrow{animation:heroEyebrowIn .75s var(--motion-ease) .12s both}
.motion-ready .hero h1{animation:heroTitleIn 1.05s var(--motion-ease) .18s both}
.motion-ready .hero .hero-accent{animation:heroAccentIn 1.05s var(--motion-spring) .36s both}
.motion-ready .hero .hero-sub{animation:heroCopyIn .9s var(--motion-ease) .48s both}
.motion-ready .hero .trustline{animation:heroCopyIn .9s var(--motion-ease) .60s both}
.motion-ready .hero .photo-shell{animation:heroImageIn 1.25s var(--motion-ease) .16s both}
.motion-ready .hero .ask-card{animation:heroAdvisorIn 1.08s var(--motion-spring) .48s both}
.motion-ready .hero .pet-tag{animation:heroTagIn .85s var(--motion-spring) .82s both}
@keyframes heroEyebrowIn{from{opacity:0;transform:translateY(20px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroTitleIn{from{opacity:0;transform:translateY(55px) scale(.975);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroAccentIn{from{opacity:0;transform:translateX(-35px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(26px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroImageIn{from{opacity:0;transform:translate3d(55px,40px,0) rotate(5deg) scale(.92);clip-path:inset(8% 5% 8% 16% round 42px);filter:blur(10px)}to{opacity:1;transform:rotate(1.7deg);clip-path:inset(0 round 38px);filter:none}}
@keyframes heroAdvisorIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes heroTagIn{from{opacity:0;transform:translateY(25px) rotate(-10deg) scale(.7)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
.hero-loaded .hero .photo-shell,.hero-loaded .hero .ask-card{animation:none}

/* The photo, form and light halo keep a little independent depth. */
.photo-shell{
  --shell-x:0px;--shell-y:0px;--shell-r:0deg;
  transform:translate3d(var(--shell-x),var(--shell-y),0) rotate(calc(1.7deg + var(--shell-r)));
  transition:box-shadow .45s ease;
  will-change:transform;
}
.hero-visual:hover .photo-shell{box-shadow:0 32px 95px rgba(30,24,70,.17)}
.ask-card{
  --card-light-x:72%;
  --card-light-y:18%;
  transform:none;
  transform-style:flat;
  will-change:auto;
  transition:box-shadow .35s ease,border-color .35s ease;
  isolation:isolate;
}
.ask-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  opacity:.5;
  background:
    radial-gradient(circle at var(--card-light-x) var(--card-light-y),rgba(4,217,196,.20),transparent 24%),
    linear-gradient(115deg,transparent 15%,rgba(4,217,196,.12) 43%,rgba(91,72,217,.10) 55%,transparent 78%);
  background-size:100% 100%,220% 100%;
  animation:advisorSheen 5.8s ease-in-out infinite;
}
.ask-card:hover{
  box-shadow:0 34px 95px rgba(54,42,125,.24),0 10px 32px rgba(30,24,70,.11)!important;
}
@keyframes advisorSheen{0%,65%,100%{background-position:0 0,140% 0;opacity:.12}78%{background-position:0 0,-30% 0;opacity:.52}}
/* Keep all advisor typography on a non-transformed layer for maximum sharpness. */
.ask-card,.ask-card *{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.ask-card button,.ask-card textarea,.ask-card input,.ask-card label,.ask-card span,.ask-card strong,.ask-card p{
  transform:none!important;
  filter:none!important;
}

/* Gateway: eyes move from headline to left action, then right action. */
.gateway-shell.current-logic.reveal.in .gateway-intro{animation:gatewayIntro .72s var(--motion-ease) both}
.gateway-shell.current-logic.reveal.in .gateway-health{animation:gatewayLeft .95s var(--motion-spring) .10s both}
.gateway-shell.current-logic.reveal.in .gateway-care{animation:gatewayRight .95s var(--motion-spring) .22s both}
@keyframes gatewayIntro{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes gatewayLeft{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes gatewayRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
.gateway-icon{animation:iconFloat 3.8s ease-in-out infinite}
.gateway-care .gateway-icon{animation-delay:-1.2s}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(2deg)}}
.gateway-health,.gateway-care{transition:transform .38s var(--motion-ease),box-shadow .38s ease,background .38s ease}
.gateway-health:hover{transform:translateY(-6px);box-shadow:0 30px 80px rgba(91,72,217,.24)}
.gateway-care:hover{transform:translateY(-6px);box-shadow:0 25px 65px rgba(26,20,50,.10)}

/* Statement becomes a choreographed title instead of one static block. */
.statement{overflow:hidden;--statement-p:0}
.statement::before{
  content:"COMUJE";
  position:absolute;
  left:50%;top:52%;
  transform:translate(-50%,-50%) translateX(calc((var(--statement-p) - .5) * -10vw));
  font-size:26vw;
  line-height:.7;
  letter-spacing:-.09em;
  font-weight:950;
  color:rgba(91,72,217,.035);
  white-space:nowrap;
  pointer-events:none;
}
.statement-motion-title{display:grid;gap:.01em;overflow:visible}
.statement-line{display:block;will-change:transform,opacity,filter;transition:transform .08s linear}
.statement-line.line-a{transform:translateX(calc((.5 - var(--statement-p)) * 10vw))}
.statement-line.line-b{transform:translateX(calc((var(--statement-p) - .5) * 14vw))}
.statement-line.line-c{transform:translateX(calc((.5 - var(--statement-p)) * 7vw))}

/* Story feels more like a sequence of cuts: slightly wider movement + moving light. */
.story::after{
  content:"";
  position:absolute;inset:-10%;z-index:9;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.055) 46%,transparent 62%);
  transform:translateX(-70%) skewX(-8deg);
  animation:storyLight 8s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes storyLight{0%,50%{transform:translateX(-72%) skewX(-8deg)}75%{transform:translateX(72%) skewX(-8deg)}100%{transform:translateX(72%) skewX(-8deg)}}
.story-step .step-no{transition:letter-spacing .3s ease}
.story-step h3{transform-origin:left center}
.query-float,.phone{backface-visibility:hidden}

/* Image tiles have depth and a subtle pointer tilt after entering. */
.pet-card{
  --tilt-x:0deg;--tilt-y:0deg;--lift:0px;
  transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transform-style:preserve-3d;
  transition:transform .35s var(--motion-ease),box-shadow .35s ease;
}
.pet-card.in:hover{--lift:-7px;box-shadow:0 28px 75px rgba(30,24,70,.15)}
.pet-copy{transform:translateZ(35px)}
.pet-copy h3,.article h3{transition:letter-spacing .35s ease,transform .35s var(--motion-ease)}
.pet-card:hover .pet-copy h3{transform:translateX(5px);letter-spacing:-.055em}
.article-img{transition:transform .42s var(--motion-ease),box-shadow .42s ease}
.article:hover .article-img{transform:translateY(-7px) scale(1.01);box-shadow:0 26px 70px rgba(30,24,70,.13)}

/* Care phone travels against scroll direction, creating depth. */
@supports (animation-timeline:view()){
  .care-phone{
    animation:carePhoneTravel linear both;
    animation-timeline:view();
    animation-range:entry -5% exit 105%;
  }
  @keyframes carePhoneTravel{
    from{transform:translateY(80px) rotate(7deg) scale(.91)}
    45%{transform:translateY(0) rotate(2deg) scale(1)}
    to{transform:translateY(-60px) rotate(-1deg) scale(1.035)}
  }
  .care-stage::before{
    animation:careOrbTravel linear both;
    animation-timeline:view();
    animation-range:entry 0 exit 100%;
  }
  @keyframes careOrbTravel{from{transform:translate3d(5%,8%,0) scale(.88)}to{transform:translate3d(-8%,-8%,0) scale(1.14)}}
}

/* Safety cards come in as a rhythm, not all together. */
.safety-card.reveal{transition-duration:.75s}
.safety-card:nth-child(1){transition-delay:.02s}
.safety-card:nth-child(2){transition-delay:.10s}
.safety-card:nth-child(3){transition-delay:.18s}
.safety-card:nth-child(4){transition-delay:.26s}
.safety-card.in{position:relative;overflow:hidden}
.safety-card.in::after{
  content:"";position:absolute;left:-70%;top:0;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(4,217,196,.08),transparent);
  transform:skewX(-15deg);
  animation:safetySweep 1.1s ease .2s both;
}
@keyframes safetySweep{to{left:130%}}

/* Final CTA closes like a final title card. */
.final{--final-p:0}
.final h2{will-change:transform}
@supports (animation-timeline:view()){
  .final h2{
    animation:finalTitleTravel linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 70%;
  }
  @keyframes finalTitleTravel{from{opacity:.2;transform:translateY(65px) scale(.94);letter-spacing:-.105em}to{opacity:1;transform:none;letter-spacing:-.085em}}
  .final::after{
    animation:finalQuestionTravel linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes finalQuestionTravel{from{transform:translate3d(7vw,8vh,0) rotate(-7deg) scale(.88)}to{transform:translate3d(-5vw,-7vh,0) rotate(5deg) scale(1.07)}}
}
.final-ask{transition:transform .35s var(--motion-ease),box-shadow .35s ease}
.final-ask:focus-within{transform:translateY(-5px) scale(1.01);box-shadow:0 24px 70px rgba(20,80,80,.15)}
.final-ask button{transition:transform .25s var(--motion-ease),box-shadow .25s ease,background .25s ease}
.final-ask button:hover{transform:translateY(-2px) scale(1.025);box-shadow:0 12px 30px rgba(91,72,217,.25)}

/* Magnetic actions can be moved a few pixels by JS without affecting layout. */
.motion-magnetic{--mag-x:0px;--mag-y:0px;transform:translate3d(var(--mag-x),var(--mag-y),0);will-change:transform}

@media(max-width:900px){
  .motion-cursor{display:none}
  .ask-card{transform:none!important}
  .photo-shell{--shell-x:0px!important;--shell-y:0px!important;--shell-r:0deg!important}
}
@media(max-width:640px){
  .gateway-icon{animation-duration:5.2s}
}
@media(prefers-reduced-motion:reduce){
  .motion-cursor{display:none!important}
  .motion-ready .hero *{animation:none!important}
  .ask-card,.photo-shell,.pet-card,.care-phone,.final h2,.final::after,.story::after,.gateway-icon{animation:none!important;transform:none!important}
  .statement-line{transform:none!important}
  .gateway-shell.current-logic.reveal.in .gateway-intro,
  .gateway-shell.current-logic.reveal.in .gateway-health,
  .gateway-shell.current-logic.reveal.in .gateway-care{animation:none!important}
}



/* =====================================================================
   V11 — CLEAN ADVISOR / CINEMATIC EDITORIAL PAGE
   The tool stays calm and sharp. Visual energy lives around it and below it.
   ===================================================================== */

.design-v11{
  --canvas:#FBFAF7;
  --lavender:#EEEAFE;
  --lavender-2:#F5F2FF;
  --mint:#E7FBF7;
  --charcoal:#121116;
  --section-pad:clamp(86px,9vw,160px);
  background:var(--canvas);
}

/* Remove the global cursor gimmick in this calmer direction. */
.design-v11 .motion-cursor{display:none!important}

/* ----------------------------- HERO --------------------------------- */
.design-v11 .hero{
  min-height:100svh;
  padding-top:126px;
  padding-bottom:82px;
  overflow:clip;
  background:
    radial-gradient(circle at 73% 18%,rgba(4,217,196,.11),transparent 24%),
    radial-gradient(circle at 18% 8%,rgba(91,72,217,.085),transparent 25%),
    linear-gradient(180deg,#FCFBF8 0%,#F8F6F2 100%);
}
.design-v11 .hero::before{
  content:"";
  position:absolute;
  left:-12vw;top:22%;
  width:42vw;height:42vw;
  border:1px solid rgba(91,72,217,.08);
  border-radius:50%;
  pointer-events:none;
  transform:translateY(calc(var(--hero-page-p,0) * -4vw));
}
.design-v11 .hero::after{
  content:"";
  position:absolute;
  right:-8vw;bottom:-19vw;
  width:48vw;height:48vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(4,217,196,.10),rgba(4,217,196,0) 68%);
  pointer-events:none;
}
.design-v11 .hero-copy{max-width:720px}
.design-v11 .hero-copy h1{max-width:760px}
.design-v11 .hero-sub{max-width:540px;color:#64626a}
.design-v11 .trustline{gap:16px}
.design-v11 .trustline span{
  padding:8px 0;
  color:#6c6972;
}
.design-v11 .hero-bgword{
  left:auto;right:-2vw;bottom:-4vw;
  font-size:18vw;
  color:rgba(91,72,217,.028);
}

.design-v11 .hero-visual{
  min-height:665px;
  isolation:isolate;
}
.design-v11 .hero-visual::before{
  left:2%;top:4%;width:60%;height:72%;
  background:rgba(255,255,255,.66);
  filter:blur(28px);
}
.design-v11 .hero-visual-orbit{
  position:absolute;
  inset:2% -5% 7% 10%;
  border:1px solid rgba(91,72,217,.12);
  border-radius:48% 42% 45% 40%;
  z-index:0;
  pointer-events:none;
  transform:rotate(-4deg);
}
.design-v11 .hero-visual-orbit::before,
.design-v11 .hero-visual-orbit::after{
  content:"";
  position:absolute;
  border-radius:50%;
}
.design-v11 .hero-visual-orbit::before{
  width:12px;height:12px;
  background:var(--teal);
  top:11%;right:7%;
  box-shadow:0 0 0 8px rgba(4,217,196,.10);
  animation:v11OrbitPulse 2.8s ease-in-out infinite;
}
.design-v11 .hero-visual-orbit::after{
  width:7px;height:7px;
  background:var(--purple);
  bottom:15%;left:3%;
}
@keyframes v11OrbitPulse{50%{box-shadow:0 0 0 15px rgba(4,217,196,0);transform:scale(1.1)}}

.design-v11 .photo-shell{
  inset:8% -2% 2% 23%;
  border-radius:52px 110px 52px 52px;
  transform:rotate(1deg);
  box-shadow:0 28px 90px rgba(29,23,65,.14);
}
.design-v11 .photo-shell::after{
  background:
    linear-gradient(100deg,rgba(18,17,22,.10),transparent 43%),
    linear-gradient(180deg,transparent 55%,rgba(21,18,34,.26));
}
.design-v11 .hero-photo{
  object-position:56% 50%;
  filter:saturate(.93) contrast(1.03);
}
.design-v11 .visual-note{
  position:absolute;
  z-index:7;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(31,27,48,.07);
  box-shadow:0 14px 38px rgba(30,24,70,.09);
  backdrop-filter:blur(12px);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  color:#55515d;
  pointer-events:none;
}
.design-v11 .visual-note span{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.design-v11 .visual-note-a{right:0;top:14%;animation:v11FloatA 5s ease-in-out infinite}
.design-v11 .visual-note-b{right:3%;bottom:11%;animation:v11FloatB 5.8s ease-in-out infinite}
@keyframes v11FloatA{50%{transform:translateY(-7px)}}
@keyframes v11FloatB{50%{transform:translateY(7px)}}
.design-v11 .pet-tag{
  left:auto;right:9%;bottom:25%;
  padding:11px 14px;
  border-radius:999px;
  background:var(--teal);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  transform:none;
  box-shadow:0 15px 35px rgba(4,217,196,.18);
}

/* The advisor becomes the visual calm point. Absolutely no moving text/controls. */
.design-v11 .ask-card{
  left:-1%;top:8%;width:min(570px,90%);
  padding:24px!important;
  border:1px solid rgba(91,72,217,.15)!important;
  border-radius:28px!important;
  box-shadow:0 24px 70px rgba(48,38,104,.17),0 3px 12px rgba(27,22,50,.05)!important;
  transform:none!important;
  animation:none!important;
  background:#fff!important;
}
.design-v11 .ask-card::after{
  animation:none!important;
  opacity:.20!important;
  background:radial-gradient(circle at 82% 4%,rgba(4,217,196,.12),transparent 28%);
}
.design-v11 .ask-card:hover{
  box-shadow:0 26px 74px rgba(48,38,104,.18),0 3px 12px rgba(27,22,50,.05)!important;
}
.design-v11 .ask-card::before{
  top:-12px;left:22px;
  background:var(--purple)!important;
  letter-spacing:.11em;
}
.design-v11 .ask-card textarea{
  min-height:138px!important;
  background:#FCFBFE!important;
  border:1.5px solid #DCD7F1!important;
  box-shadow:none;
}
.design-v11 .ask-card textarea:focus{
  border-color:var(--purple)!important;
  box-shadow:0 0 0 4px rgba(91,72,217,.09)!important;
}
.design-v11 .ask-actions .send:hover{transform:none!important}
.design-v11 .ask-card *:not(.ai-loading-card):not(.ai-loading-card *),
.design-v11 .ask-card button,
.design-v11 .ask-card textarea{
  transform:none!important;
  filter:none!important;
  animation:none!important;
}

/* -------------------------- GATEWAY --------------------------------- */
.design-v11 .advisor-gateway{
  padding:65px 5vw 118px;
  background:
    linear-gradient(180deg,#F8F6F2 0%,#fff 30%,#fff 100%);
  overflow:hidden;
}
.design-v11 .advisor-gateway::before{
  content:"01 / 02";
  position:absolute;
  right:3vw;top:3px;
  font-size:clamp(75px,12vw,190px);
  font-weight:950;
  letter-spacing:-.08em;
  color:rgba(91,72,217,.035);
  pointer-events:none;
}
.design-v11 .gateway-shell{
  max-width:1460px;
  border:0;
  padding:14px;
  border-radius:34px;
  background:#fff;
  box-shadow:0 24px 80px rgba(34,27,72,.075);
}
.design-v11 .gateway-intro{padding:24px 28px}
.design-v11 .gateway-intro strong{font-size:clamp(22px,2vw,30px)}
.design-v11 .gateway-health,
.design-v11 .gateway-care{
  border-radius:26px;
  min-height:250px;
}
.design-v11 .gateway-health{
  background:linear-gradient(145deg,#5B48D9 0%,#765CF1 64%,#5B48D9 100%);
}
.design-v11 .gateway-health::before{
  content:"01";
  position:absolute;right:18px;bottom:-27px;
  font-size:112px;font-weight:950;line-height:1;
  color:rgba(255,255,255,.075);
}
.design-v11 .gateway-care::before{
  content:"02";
  position:absolute;right:18px;bottom:-27px;
  font-size:112px;font-weight:950;line-height:1;
  color:rgba(91,72,217,.05);
}
.design-v11 .gateway-health:hover,
.design-v11 .gateway-care:hover{transform:translateY(-4px)}
.design-v11 .gateway-icon{animation:none!important}

/* -------------------------- STATEMENT ------------------------------- */
.design-v11 .statement{
  min-height:88vh;
  padding:11vw 5vw;
  background:
    radial-gradient(circle at 88% 12%,rgba(4,217,196,.12),transparent 24%),
    linear-gradient(180deg,#fff 0%,#F5F2FF 100%);
}
.design-v11 .statement::after{
  content:"";
  position:absolute;
  left:5vw;right:5vw;bottom:8vw;
  height:1px;
  background:linear-gradient(90deg,var(--purple),rgba(91,72,217,.1) 40%,var(--teal));
  transform-origin:left;
  transform:scaleX(calc(.18 + var(--statement-p) * .82));
}
.design-v11 .statement h2{position:relative;z-index:2}
.design-v11 .statement .tiny{
  max-width:390px;
  padding:18px 0 0 22px;
  border-left:2px solid var(--teal);
}

/* ---------------------- CINEMATIC STORY ----------------------------- */
.design-v11 .story-wrap{height:560vh}
.design-v11 .story{
  background:#0E0D12;
}
.design-v11 .story::before{
  box-shadow:inset 0 0 180px rgba(0,0,0,.42);
  background:
    linear-gradient(90deg,rgba(8,7,12,.72) 0%,rgba(8,7,12,.34) 46%,transparent 75%),
    linear-gradient(180deg,rgba(0,0,0,.05),transparent 18%,transparent 77%,rgba(0,0,0,.36));
}
.design-v11 .story-overline{
  position:absolute;
  z-index:15;
  top:31px;left:5vw;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  color:rgba(255,255,255,.62);
}
.design-v11 .story-overline span{color:var(--teal);margin:0 8px}
.design-v11 .story-progress{
  right:31px;
  height:280px;
  background:rgba(255,255,255,.15);
}
.design-v11 .story-progress::before,
.design-v11 .story-progress::after{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:#17151e;
}
.design-v11 .story-progress::before{top:0}
.design-v11 .story-progress::after{bottom:0}
.design-v11 .story-step h3{
  max-width:900px;
  text-shadow:0 10px 30px rgba(0,0,0,.15);
}
.design-v11 .query-float{
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 100px rgba(0,0,0,.42);
}
.design-v11 .story-wrap::after{
  height:30vh;
  background:linear-gradient(180deg,transparent,#0E0D12 48%,#FBFAF7 100%);
}

/* ------------------------- SPECIES ---------------------------------- */
.design-v11 .species{
  padding:var(--section-pad) 5vw 9vw;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 16%,rgba(4,217,196,.08),transparent 22%),
    var(--canvas);
}
.design-v11 .species::before{
  content:"ANIMALS";
  position:absolute;
  right:-2vw;top:5vw;
  font-size:15vw;
  font-weight:950;
  letter-spacing:-.08em;
  color:rgba(91,72,217,.026);
  pointer-events:none;
}
.design-v11 .section-title{position:relative;z-index:2}
.design-v11 .pet-grid{gap:26px;align-items:stretch}
.design-v11 .pet-card{
  border-radius:42px;
  box-shadow:0 16px 55px rgba(32,26,65,.07);
  transform:none!important;
}
.design-v11 .pet-card:nth-child(1){border-radius:42px 110px 42px 42px}
.design-v11 .pet-stack .pet-card:first-child{border-radius:90px 42px 42px 42px}
.design-v11 .pet-stack .pet-card:last-child{border-radius:42px 42px 90px 42px}
.design-v11 .pet-copy{transform:none!important}
.design-v11 .pet-card::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  border:1px solid rgba(255,255,255,.22);
  border-radius:inherit;
  pointer-events:none;
}
.design-v11 .pet-card:hover{box-shadow:0 30px 85px rgba(30,24,70,.14)}

/* --------------------------- CARE ---------------------------------- */
.design-v11 .care{
  padding:7vw 5vw 12vw;
  background:linear-gradient(180deg,#FBFAF7 0%,#fff 100%);
}
.design-v11 .care-stage{
  min-height:760px;
  border-radius:56px;
  background:
    radial-gradient(circle at 87% 14%,rgba(4,217,196,.22),transparent 20%),
    linear-gradient(135deg,#4B39C5 0%,#654EE0 58%,#4E3BC8 100%);
  box-shadow:0 35px 110px rgba(64,49,160,.18);
}
.design-v11 .care-stage::before{
  width:72vw;height:72vw;
  right:-29vw;top:-31vw;
  border-color:rgba(255,255,255,.14);
  box-shadow:
    0 0 0 90px rgba(255,255,255,.025),
    0 0 0 180px rgba(255,255,255,.018);
}
.design-v11 .care-stage::after{
  content:"";
  position:absolute;
  left:-6%;bottom:-19%;
  width:38vw;height:38vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(4,217,196,.17),transparent 68%);
  pointer-events:none;
}
.design-v11 .care-orbit-dot{
  position:absolute;z-index:1;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 11px rgba(4,217,196,.09);
  animation:v11CareDot 4.6s ease-in-out infinite;
}
.design-v11 .care-orbit-dot.dot-a{width:10px;height:10px;right:10%;top:18%}
.design-v11 .care-orbit-dot.dot-b{width:7px;height:7px;right:4%;bottom:24%;animation-delay:-2s}
@keyframes v11CareDot{50%{transform:translateY(-13px);box-shadow:0 0 0 20px rgba(4,217,196,0)}}
.design-v11 .care-copy h2{max-width:650px}
.design-v11 .care-list div{font-size:15px}
.design-v11 .care-phone{
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 38px 110px rgba(22,12,80,.32);
}

/* -------------------------- SAFETY --------------------------------- */
.design-v11 .safety{
  padding:11vw 5vw 10vw;
  background:
    radial-gradient(circle at 86% 10%,rgba(91,72,217,.16),transparent 24%),
    #111016;
  overflow:hidden;
}
.design-v11 .safety::before{
  content:"SAFE / CLEAR / HUMAN";
  position:absolute;
  right:-3vw;bottom:-2.5vw;
  font-size:8.5vw;
  font-weight:950;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.022);
  white-space:nowrap;
}
.design-v11 .safety-rail{
  position:relative;
  height:1px;
  margin-top:5.5vw;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.design-v11 .safety-rail span{
  display:block;width:34%;height:100%;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  animation:v11Rail 4.6s ease-in-out infinite;
}
@keyframes v11Rail{0%,15%{transform:translateX(-120%)}70%,100%{transform:translateX(330%)}}
.design-v11 .safety-grid{margin-top:0;border-top:0}
.design-v11 .safety-card{
  min-height:270px;
  background:rgba(17,16,22,.78);
  transition:background .3s ease,transform .3s ease;
}
.design-v11 .safety-card:hover{background:#181720;transform:translateY(-4px)}
.design-v11 .safety-card .num{font-size:12px;letter-spacing:.1em}

/* -------------------------- ARTICLES -------------------------------- */
.design-v11 .articles{
  padding:var(--section-pad) 5vw 12vw;
  background:#FBFAF7;
  overflow:hidden;
}
.design-v11 .articles::after{
  content:"READ";
  position:absolute;
  left:-1vw;bottom:-5vw;
  font-size:18vw;
  font-weight:950;
  letter-spacing:-.09em;
  color:rgba(91,72,217,.025);
  pointer-events:none;
}
.design-v11 .article-grid{gap:26px;position:relative;z-index:2}
.design-v11 .article-img{border-radius:38px;box-shadow:0 14px 46px rgba(31,25,64,.06)}
.design-v11 .article:first-child .article-img{border-radius:38px 96px 38px 38px}
.design-v11 .article:nth-child(2) .article-img{border-radius:76px 38px 38px 38px}
.design-v11 .article:nth-child(3) .article-img{border-radius:38px 38px 76px 38px}
.design-v11 .article h3{position:relative;padding-bottom:12px}
.design-v11 .article h3::after{
  content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;
  background:var(--teal);transform-origin:left;transition:width .35s var(--motion-ease);
}
.design-v11 .article:hover h3::after{width:94px}

/* ---------------------------- FINAL -------------------------------- */
.design-v11 .final{
  min-height:100svh;
  background:
    radial-gradient(circle at 78% 20%,rgba(255,255,255,.32),transparent 22%),
    radial-gradient(circle at 16% 84%,rgba(91,72,217,.14),transparent 27%),
    var(--teal);
}
.design-v11 .final::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(21,20,25,.12) .8px,transparent .8px);
  background-size:16px 16px;
  opacity:.16;
  mask-image:linear-gradient(90deg,transparent,#000 35%,#000 75%,transparent);
  pointer-events:none;
}
.design-v11 .final::after{opacity:.16}
.design-v11 .final-ask{
  max-width:850px;
  padding:9px 9px 9px 27px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 22px 65px rgba(20,70,68,.13);
}
.design-v11 .final-ask:focus-within{transform:translateY(-3px);box-shadow:0 28px 75px rgba(20,70,68,.17)}
.design-v11 .footer{padding-top:24px;border-top:1px solid rgba(20,30,30,.16)}

/* Sharper section entrances: no blur on text, movement only. */
@supports (animation-timeline:view()){
  .design-v11 .cinematic-section{
    animation:v11SectionIn linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 28%;
  }
  @keyframes v11SectionIn{
    from{opacity:.66;transform:translateY(3.8vh) scale(.992)}
    to{opacity:1;transform:none}
  }
}

/* Responsive simplification. */
@media(max-width:1100px){
  .design-v11 .photo-shell{inset:10% 0 0 14%;border-radius:44px 86px 44px 44px}
  .design-v11 .visual-note-b{right:1%;bottom:7%}
  .design-v11 .ask-card{left:0;top:4%}
}
@media(max-width:700px){
  .design-v11 .hero{padding-top:100px;padding-bottom:54px}
  .design-v11 .hero-visual{min-height:610px}
  .design-v11 .photo-shell{inset:21% 0 0 9%;border-radius:32px 58px 32px 32px}
  .design-v11 .visual-note{display:none}
  .design-v11 .pet-tag{display:none}
  .design-v11 .ask-card{top:0;width:98%;padding:19px!important}
  .design-v11 .hero-visual-orbit{display:none}
  .design-v11 .advisor-gateway{padding:26px 14px 82px}
  .design-v11 .gateway-health,.design-v11 .gateway-care{min-height:auto}
  .design-v11 .statement{min-height:70vh;padding-top:100px;padding-bottom:100px}
  .design-v11 .story-overline{top:21px;left:22px}
  .design-v11 .story-progress{right:13px}
  .design-v11 .species,.design-v11 .articles{padding-top:92px;padding-bottom:92px}
  .design-v11 .pet-card,.design-v11 .pet-stack .pet-card{border-radius:28px!important}
  .design-v11 .care{padding:55px 14px 90px}
  .design-v11 .care-stage{border-radius:32px;min-height:auto}
  .design-v11 .care-orbit-dot{display:none}
  .design-v11 .safety{padding-top:96px;padding-bottom:90px}
  .design-v11 .article-img,.design-v11 .article:first-child .article-img,.design-v11 .article:nth-child(2) .article-img,.design-v11 .article:nth-child(3) .article-img{border-radius:28px}
}
@media(prefers-reduced-motion:reduce){
  .design-v11 .hero-visual-orbit::before,
  .design-v11 .visual-note,
  .design-v11 .care-orbit-dot,
  .design-v11 .safety-rail span{animation:none!important}
}



/* =====================================================================
   V12 — CURRENT UX CLARITY + CINEMATIC BRAND EXPERIENCE
   Calm tool, progressive decisions, stronger SEO content, memorable page.
   ===================================================================== */
.design-v12{--v12-ease:cubic-bezier(.18,.82,.2,1);--v12-border:rgba(25,21,36,.10)}
.design-v12 .noise{opacity:.022}
.design-v12 .v12-hero{grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr);gap:4.2vw;padding-bottom:96px}
.design-v12 .hero-copy{align-self:center;max-width:660px}
.design-v12 .seo-h1{font-size:clamp(16px,1.3vw,21px)!important;line-height:1.2!important;letter-spacing:-.025em!important;margin:0 0 22px!important;font-weight:850!important;color:var(--purple)!important;max-width:none!important}
.design-v12 .seo-h1::before{content:"";display:inline-block;width:36px;height:2px;background:var(--teal);vertical-align:middle;margin:0 12px 4px 0}
.design-v12 .hero-display{font-size:clamp(72px,8.25vw,142px);line-height:.82;letter-spacing:-.078em;font-weight:870;max-width:760px}
.design-v12 .hero-display .hero-accent{display:block}
.design-v12 .hero-sub{font-size:clamp(17px,1.42vw,22px);line-height:1.52;margin-top:34px}
.design-v12 .hero-visual{min-height:760px;height:min(80vh,860px)}
.design-v12 .photo-shell{inset:0 0 0 29%;border-radius:44px}
.design-v12 .hero-photo{object-position:57% 50%}
.design-v12 .visual-note-a{top:8%;right:0}.design-v12 .visual-note-b{right:5%;bottom:8%}

/* The advisor is a calm product surface. */
.design-v12 .v12-tool{left:-3%;top:4%;width:min(650px,92%);padding:24px!important;border:1px solid rgba(91,72,217,.16)!important;box-shadow:0 34px 100px rgba(42,32,93,.20)!important;max-height:none}
.design-v12 .v12-tool::before{content:"PORADNA"}
.design-v12 .v12-tool::after{animation:none!important;opacity:.22!important}
.design-v12 .tool-step-label{display:flex;align-items:center;gap:9px;margin:4px 0 10px;font-size:11px;font-weight:900;letter-spacing:.035em;color:#5d5966}
.design-v12 .tool-step-label span{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#efeafd;color:var(--purple);font-size:10px}
.design-v12 .tool-step-label.second{margin-top:17px}.design-v12 .tool-helper{margin:0 0 11px;color:#77727e;font-size:11px;line-height:1.45}
.design-v12 .v12-primary-paths{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.design-v12 .v12-path{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;text-align:left;border:1px solid #e2ded7;background:#f8f7f4;padding:14px 14px 13px;border-radius:18px;color:var(--ink);min-height:132px;transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;position:relative;overflow:hidden}
.design-v12 .v12-path::after{content:"";position:absolute;right:-32px;top:-32px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at center, rgba(91,72,217,.12), rgba(91,72,217,0) 68%);pointer-events:none}
.design-v12 .v12-path[data-v12-path="care"]::after{background:radial-gradient(circle at center, rgba(4,217,196,.16), rgba(4,217,196,0) 68%)}
.design-v12 .v12-path:hover{border-color:#cfc8ef;background:#faf9ff;transform:translateY(-2px)}
.design-v12 .v12-path.active{border-color:#9f92ed;background:#f1edff;box-shadow:inset 0 0 0 1px rgba(91,72,217,.08),0 12px 30px rgba(91,72,217,.08)}
.design-v12 .v12-path-head{display:flex;align-items:flex-start;gap:12px;width:100%;position:relative;z-index:1}
.design-v12 .v12-path-icon{display:grid;place-items:center;width:46px;height:46px;min-width:46px;border-radius:15px;background:linear-gradient(180deg,#7d1cff,#6512ea);color:#fff;box-shadow:0 12px 28px rgba(91,72,217,.22)}
.design-v12 .v12-path-icon.care-icon{width:46px;height:46px;min-width:46px;border-radius:15px;background:linear-gradient(180deg,#17e5cf,#06cdb8);color:#123f39;box-shadow:0 12px 28px rgba(4,217,196,.18)}
.design-v12 .v12-path-icon svg{width:23px;height:23px;display:block}
.design-v12 .v12-path-icon,.design-v12 .v12-path-icon.care-icon{box-sizing:border-box;flex:0 0 46px;padding:0!important;margin:0!important}
.design-v12 .v12-path-title b{display:block;font-size:16px;letter-spacing:-.03em;line-height:1.12}.design-v12 .v12-path-title small{display:block;font-size:12px;color:#6f6977;margin-top:5px;line-height:1.42}
.design-v12 .v12-path-copy{font-size:11.5px;line-height:1.5;color:#5e5868;margin:0;position:relative;z-index:1}
.design-v12 .v12-path-list{display:none}
.design-v12 .v12-path-meta{display:flex;flex-wrap:wrap;gap:7px;width:100%;position:relative;z-index:1}
.design-v12 .v12-path-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;min-height:18px;line-height:1;border-radius:999px;background:#fff;border:1px solid #e4dfdb;font-size:10px;font-weight:800;color:#575162;letter-spacing:.015em}
.design-v12 .v12-path.active .v12-path-chip{background:rgba(255,255,255,.78);border-color:#ddd5ff}
.design-v12 .v12-path-panel,.design-v12 .v12-mode-panel{display:none}.design-v12 .v12-path-panel.active,.design-v12 .v12-mode-panel.active{display:block;animation:v12PanelIn .32s var(--v12-ease) both}
@keyframes v12PanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.design-v12 .v12-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.design-v12 .v12-mode{position:relative;text-align:left;border:1px solid #dfdcd5;background:#fff;border-radius:15px;padding:13px;color:var(--ink);transition:.22s ease}
.design-v12 .v12-mode:hover{transform:translateY(-1px);border-color:#bbb2ed}.design-v12 .v12-mode.active{border-color:var(--purple);box-shadow:0 0 0 2px rgba(91,72,217,.08);background:#fcfbff}
.design-v12 .v12-mode.featured::after{content:"";position:absolute;inset:-1px;border-radius:15px;pointer-events:none;background:linear-gradient(130deg,rgba(91,72,217,.06),rgba(4,217,196,.08));z-index:0}.design-v12 .v12-mode>*{position:relative;z-index:1}
.design-v12 .mode-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.design-v12 .mode-top b{font-size:12.5px}.design-v12 .mode-top em{font-style:normal;font-size:8px;font-weight:900;padding:5px 7px;border-radius:999px;background:#efecff;color:var(--purple)}
.design-v12 .v12-mode>span:not(.mode-top){display:block;font-size:9.5px;color:#706c75;line-height:1.4}.design-v12 .v12-mode ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:3px}.design-v12 .v12-mode li{font-size:9px;color:#5d5964}.design-v12 .v12-mode li::before{content:"✓";color:var(--teal);font-weight:950;margin-right:5px}
.design-v12 .v12-mode-panel{margin-top:12px;padding-top:12px;border-top:1px solid #ece8e1}
.design-v12 .tool-field-label{display:block;margin:8px 0 6px;font-size:10px;font-weight:900;color:#59545f}
.design-v12 .tool-animal-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.design-v12 .tool-animal-chips button{border:1px solid #ddd9d1;background:#faf9f6;border-radius:999px;padding:7px 9px;font-size:9px;font-weight:850;color:#5f5b64}.design-v12 .tool-animal-chips button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.design-v12 .v12-tool textarea{height:96px!important;min-height:96px!important;padding:13px!important;font-size:13px!important;border-width:1.5px!important}
.design-v12 .tool-privacy{font-size:8.5px;color:#8a858f;margin-top:6px}.design-v12 .v12-tool .ask-actions{margin-top:9px!important}.design-v12 .v12-tool .ask-actions button{padding:11px 12px!important}.design-v12 .v12-tool .send{font-size:11px!important}.design-v12 .send.full{width:100%;border:0;background:var(--purple);color:#fff;border-radius:13px;padding:13px 14px;font-weight:900;font-size:11px;box-shadow:0 10px 24px rgba(91,72,217,.18)}
.design-v12 .extended-inline-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.design-v12 .extended-inline-summary>div{padding:10px;border-radius:12px;background:#f8f7f4}.design-v12 .extended-inline-summary strong{display:block;font-size:9.5px}.design-v12 .extended-inline-summary span{display:block;font-size:8.5px;line-height:1.35;color:#77727e;margin-top:3px}
.design-v12 .verification-note{display:flex;gap:9px;align-items:center;margin:9px 0;padding:9px 10px;border-radius:12px;background:#eafbf8}.design-v12 .verification-note>span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--teal);font-weight:950}.design-v12 .verification-note b{font-size:9.5px}.design-v12 .verification-note small{display:block;color:#52726e;font-size:8.5px;margin-top:2px}
.design-v12 .care-tool-intro{display:grid;grid-template-columns:46px 1fr;gap:11px;align-items:start;padding-top:4px}.design-v12 .care-tool-orb{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#e4fbf6;color:#238e81;font-size:17px}.design-v12 .care-tool-intro h3{font-size:16px;letter-spacing:-.04em;margin:4px 0 5px}.design-v12 .care-tool-intro p{font-size:10px;line-height:1.45;color:#706c75;margin:0}.design-v12 .care-mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.design-v12 .care-mini-steps span{display:flex;align-items:center;gap:6px;background:#f7f6f2;border-radius:10px;padding:8px;font-size:8.5px;font-weight:800}.design-v12 .care-mini-steps b{display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#fff;color:var(--purple)}

/* Extended question: SEO-rich content, designed as an editorial sequence. */
.design-v12 .extended-showcase{position:relative;padding:var(--section-pad) 5vw calc(var(--section-pad) + 30px);background:linear-gradient(180deg,#f8f6f2 0%,#fff 100%);overflow:hidden}
.design-v12 .extended-showcase::before{content:"";position:absolute;width:62vw;height:62vw;border-radius:50%;border:1px solid rgba(91,72,217,.08);left:-36vw;top:10%;pointer-events:none}
.design-v12 .extended-showcase-head{display:grid;grid-template-columns:1.1fr .65fr;gap:8vw;align-items:end;margin-bottom:6vw}.design-v12 .extended-showcase-head h2{font-size:clamp(58px,7.5vw,118px);line-height:.84;letter-spacing:-.075em;margin:0}.design-v12 .extended-showcase-head h2 span{color:var(--purple)}.design-v12 .extended-showcase-head>p{font-size:17px;line-height:1.6;color:#68656e;max-width:530px;margin:0 0 8px}
.design-v12 .extended-showcase-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:7vw;align-items:center}.design-v12 .extended-visual{position:relative;min-height:650px}.design-v12 .extended-visual-photo{position:absolute;inset:5% 8% 3% 4%;border-radius:48% 30% 42% 26%;overflow:hidden;box-shadow:0 35px 100px rgba(38,30,78,.15)}.design-v12 .extended-visual-photo img{transition:transform 1.2s var(--v12-ease);transform:scale(1.03)}.design-v12 .extended-visual.in .extended-visual-photo img{transform:scale(1)}
.design-v12 .extended-ring{position:absolute;inset:-2% 1% 0 -2%;border:1px solid rgba(91,72,217,.16);border-radius:50%;pointer-events:none;animation:v12Ring 13s linear infinite}@keyframes v12Ring{to{transform:rotate(360deg)}}
.design-v12 .extended-float-card{position:absolute;z-index:3;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border:1px solid rgba(36,30,55,.08);box-shadow:0 18px 55px rgba(30,24,70,.12);border-radius:18px;padding:14px 16px;min-width:180px}.design-v12 .extended-float-card span{font-size:8px;font-weight:900;color:var(--purple)}.design-v12 .extended-float-card strong{display:block;font-size:12px;margin:4px 0 3px}.design-v12 .extended-float-card small{font-size:9px;color:#78737d}.design-v12 .card-photo{left:0;bottom:9%}.design-v12 .card-follow{right:0;top:10%}
.design-v12 .extended-benefits{display:grid}.design-v12 .extended-benefit{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:25px 0;border-bottom:1px solid #e6e2da}.design-v12 .benefit-no{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#f0ecff;color:var(--purple);font-size:10px;font-weight:950}.design-v12 .extended-benefit h3{font-size:24px;letter-spacing:-.045em;margin:1px 0 7px}.design-v12 .extended-benefit p{font-size:13px;line-height:1.55;color:#706c75;margin:0;max-width:620px}.design-v12 .extended-cta{justify-self:start;margin-top:25px;border:0;background:var(--ink);color:#fff;border-radius:999px;padding:15px 19px;font-weight:900;font-size:11px}.design-v12 .extended-cta span{margin-left:20px;color:var(--teal)}

/* Trust section now carries the strongest current-site boundary messaging. */
.design-v12 .expectation-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:5vw;margin-bottom:3vw}.design-v12 .expectation-card{border-radius:28px;padding:28px;min-height:260px;border:1px solid rgba(255,255,255,.13)}.design-v12 .expectation-card.positive{background:rgba(91,72,217,.18)}.design-v12 .expectation-card.boundary{background:rgba(255,255,255,.055)}.design-v12 .expectation-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:900}.design-v12 .expectation-card h3{font-size:34px;letter-spacing:-.055em;margin:26px 0 16px}.design-v12 .expectation-card ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:rgba(255,255,255,.68);font-size:12px}.design-v12 .expectation-card li::before{content:"—";color:var(--teal);margin-right:8px}

/* FAQ: indexable, accessible and visually clean. */
.design-v12 .faq-section{padding:var(--section-pad) 5vw;background:#fff;position:relative;overflow:hidden}.design-v12 .faq-section::after{content:"?";position:absolute;right:-3vw;top:-12vw;font-size:38vw;line-height:1;color:rgba(91,72,217,.025);font-weight:950;pointer-events:none}.design-v12 .faq-head{position:relative;z-index:2;display:grid;grid-template-columns:1fr .55fr;gap:7vw;align-items:end;margin-bottom:5vw}.design-v12 .faq-head h2{font-size:clamp(58px,7.2vw,112px);line-height:.84;letter-spacing:-.075em;margin:0}.design-v12 .faq-head>p{font-size:16px;line-height:1.6;color:#6c6871;max-width:450px}.design-v12 .faq-list{position:relative;z-index:2;border-top:1px solid #ddd9d1}.design-v12 .faq-list details{border-bottom:1px solid #ddd9d1}.design-v12 .faq-list summary{list-style:none;display:grid;grid-template-columns:55px 1fr auto;gap:15px;align-items:center;padding:25px 5px;cursor:pointer;font-size:22px;font-weight:820;letter-spacing:-.035em}.design-v12 .faq-list summary::-webkit-details-marker{display:none}.design-v12 .faq-list summary span{font-size:9px;color:var(--purple);letter-spacing:.08em}.design-v12 .faq-list summary i{font-style:normal;font-size:22px;font-weight:400;transition:transform .25s ease}.design-v12 .faq-list details[open] summary i{transform:rotate(45deg)}.design-v12 .faq-list details p{margin:0;padding:0 70px 24px;font-size:14px;line-height:1.65;color:#6c6871;max-width:900px}

/* Cinematic page remains energetic, the tool does not. */
.design-v12 .statement{background:linear-gradient(180deg,#fff 0%,#fbfaf7 100%)}
.design-v12 .story-wrap{margin-top:0}
.design-v12 .species .pet-card{box-shadow:0 20px 70px rgba(32,25,67,.06)}
.design-v12 .final{background:linear-gradient(135deg,#04d9c4 0%,#24e0c7 54%,#8af0df 100%)}

@media(max-width:1100px){
  .design-v12 .v12-hero{grid-template-columns:1fr;padding-bottom:70px}.design-v12 .hero-visual{min-height:760px;height:auto}.design-v12 .photo-shell{inset:7% 0 0 22%}.design-v12 .v12-tool{left:0;top:0;width:min(660px,94%)}
  .design-v12 .extended-showcase-head,.design-v12 .extended-showcase-grid,.design-v12 .faq-head{grid-template-columns:1fr}.design-v12 .extended-showcase-head{gap:28px}.design-v12 .extended-visual{min-height:590px;max-width:720px}.design-v12 .expectation-split{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .design-v12 .v12-hero{padding-top:105px}.design-v12 .hero-display{font-size:66px}.design-v12 .seo-h1{font-size:15px!important}.design-v12 .hero-visual{min-height:760px}.design-v12 .photo-shell{inset:22% 0 0 10%}.design-v12 .visual-note{display:none}.design-v12 .v12-tool{width:100%;padding:18px!important}.design-v12 .v12-primary-paths,.design-v12 .v12-mode-grid{grid-template-columns:1fr}.design-v12 .v12-path{padding:12px;min-height:auto;gap:9px}.design-v12 .v12-path-title b{font-size:15px}.design-v12 .v12-path-title small,.design-v12 .v12-path-copy{font-size:11px}.design-v12 .v12-path-icon,.design-v12 .v12-path-icon.care-icon{width:42px;height:42px;min-width:42px}.design-v12 .v12-path-icon svg{width:20px;height:20px}.design-v12 .extended-inline-summary{grid-template-columns:1fr}.design-v12 .care-mini-steps{grid-template-columns:1fr 1fr 1fr}.design-v12 .care-mini-steps span{display:grid;justify-items:center;text-align:center;gap:4px}
  .design-v12 .extended-showcase{padding-left:22px;padding-right:22px}.design-v12 .extended-showcase-head h2{font-size:58px}.design-v12 .extended-visual{min-height:470px}.design-v12 .extended-float-card{min-width:150px;padding:11px 12px}.design-v12 .extended-benefit{grid-template-columns:40px 1fr;gap:12px;padding:20px 0}.design-v12 .benefit-no{width:34px;height:34px}.design-v12 .extended-benefit h3{font-size:20px}.design-v12 .expectation-split{grid-template-columns:1fr}.design-v12 .faq-section{padding-left:22px;padding-right:22px}.design-v12 .faq-head h2{font-size:58px}.design-v12 .faq-list summary{grid-template-columns:35px 1fr auto;font-size:18px;padding:20px 2px}.design-v12 .faq-list details p{padding:0 38px 20px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.design-v12 .extended-ring{animation:none!important}.design-v12 .v12-path-panel.active,.design-v12 .v12-mode-panel.active{animation:none!important}}



/* v18 — preserved SEO/navigation ending: FAQ, asked questions, articles and social footer */
.design-v12 .faq-more{
  position:relative;z-index:2;margin-top:28px;padding:21px 24px;
  display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:17px;
  border:1px solid #ded9f7;background:linear-gradient(135deg,#f7f4ff 0%,#f4fffd 100%);
  border-radius:22px;color:var(--ink);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.design-v12 .faq-more:hover{transform:translateY(-3px);border-color:#beb4f2;box-shadow:0 18px 48px rgba(55,43,120,.10)}
.design-v12 .faq-more-index{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:var(--purple);color:#fff;font-size:20px;font-weight:800}
.design-v12 .faq-more-copy{display:grid;gap:3px}
.design-v12 .faq-more-copy small{font-size:9px;letter-spacing:.12em;font-weight:900;color:var(--purple)}
.design-v12 .faq-more-copy strong{font-size:20px;letter-spacing:-.035em}
.design-v12 .faq-more-copy em{font-style:normal;font-size:12px;line-height:1.45;color:#6e6875}
.design-v12 .faq-more-arrow{font-size:24px;transition:transform .25s ease}
.design-v12 .faq-more:hover .faq-more-arrow{transform:translate(3px,-3px)}

.design-v12 .final{padding-bottom:30px}
.design-v12 .footer-v18{display:block;margin-top:8vw;padding-top:30px;border-top:1px solid rgba(20,30,30,.18);font-size:13px;font-weight:500}
.design-v12 .footer-main{display:grid;grid-template-columns:minmax(260px,1.35fr) minmax(170px,.65fr) minmax(210px,.75fr);gap:7vw;align-items:start}
.design-v12 .footer-brand{max-width:390px}
.design-v12 .footer-logo{display:inline-flex;align-items:center;gap:9px;font-size:21px;font-weight:900;letter-spacing:-.055em}
.design-v12 .footer-logo-dot{width:10px;height:10px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 5px rgba(91,72,217,.12)}
.design-v12 .footer-brand p{margin:15px 0 22px;max-width:310px;color:rgba(21,20,25,.68);font-size:13px;line-height:1.55}
.design-v12 .footer-socials{display:flex;gap:8px}
.design-v12 .social-link{width:39px;height:39px;display:grid;place-items:center;border:1px solid rgba(20,30,30,.18);border-radius:50%;background:rgba(255,255,255,.28);transition:background .2s ease,transform .2s ease,border-color .2s ease}
.design-v12 .social-link:hover{transform:translateY(-2px);background:#fff;border-color:rgba(20,30,30,.28)}
.design-v12 .social-link svg{width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:1.7}
.design-v12 .social-link:first-child svg{fill:none}
.design-v12 .footer-column{display:grid;gap:10px}
.design-v12 .footer-column strong{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.design-v12 .footer-column a{width:max-content;max-width:100%;font-size:13px;color:rgba(21,20,25,.7);transition:color .2s ease,transform .2s ease}
.design-v12 .footer-column a:hover{color:var(--ink);transform:translateX(2px)}
.design-v12 .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:18px;border-top:1px solid rgba(20,30,30,.14);font-size:11px;color:rgba(21,20,25,.58)}

@media(max-width:800px){
  .design-v12 .faq-more{grid-template-columns:42px 1fr auto;padding:17px;gap:12px}.design-v12 .faq-more-index{width:40px;height:40px}.design-v12 .faq-more-copy strong{font-size:17px}.design-v12 .faq-more-copy em{font-size:11px}
  .design-v12 .footer-main{grid-template-columns:1fr 1fr;gap:38px 25px}.design-v12 .footer-brand{grid-column:1/-1}.design-v12 .footer-v18{margin-top:80px}.design-v12 .footer-bottom{margin-top:34px}
}
@media(max-width:520px){
  .design-v12 .faq-more{grid-template-columns:38px 1fr;}.design-v12 .faq-more-arrow{display:none}.design-v12 .faq-more-copy em{display:none}
  .design-v12 .footer-main{grid-template-columns:1fr}.design-v12 .footer-brand{grid-column:auto}.design-v12 .footer-bottom{flex-direction:column;gap:6px}
}