/* DataPet — home.css. Loaded by the home page only. */
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
/* Hero */
.hero{padding:56px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border-radius:999px;background:var(--mint-pale);font-weight:600;font-size:.95rem;margin-bottom:26px}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(123,79,201,.2)}
.hero h1{font-size:clamp(2.8rem,6vw,5.2rem);letter-spacing:-.035em}
.hero .lead{font-size:1.3rem;color:var(--ink-2);margin:24px 0 34px;max-width:36ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:980px){
.hero .wrap{grid-template-columns:1fr;gap:44px}
}
/* Grid items default to min-width:auto: the price card would force 324px and overflow at 320px (WCAG 1.4.10) */
.hero .wrap>*{min-width:0}
/* Interactive price card — the one bold element */
.prices{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:28px;box-shadow:0 30px 60px -30px rgba(53,27,93,.45)}
.prices-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.prices-head h2{font-size:1.6rem;font-weight:700}
.tabs{display:inline-flex;background:rgba(255,255,255,.08);border-radius:999px;padding:4px}
.tabs button{font:600 .95rem "Saira Semi Condensed",sans-serif;color:#D3C8E6;background:none;border:0;border-radius:999px;padding:.45em 1em;cursor:pointer;transition:background .15s,color .15s}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink)}
@media (max-width:400px){
/* Small phones: the three tabs must fit in the card (WCAG 1.4.10) */
.prices{padding:22px 18px}
.tabs{display:flex;width:100%}
.tabs button{flex:1 1 auto;padding:.45em .55em;font-size:.88rem;white-space:nowrap}
}
.panel,.panel ul{list-style:none}
.panel[hidden]{display:none}
.panel li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.panel li:first-child{border-top:0}
.panel .name{font-weight:600;font-size:1.1rem}
.panel .detail{grid-column:1;color:#B9AECD;font-size:.95rem}
.panel .price{grid-row:1/span 2;grid-column:2;align-self:center;text-align:right;font-weight:800;font-size:1.5rem;color:var(--coral);white-space:nowrap}
.panel .price small{display:block;font-size:.8rem;font-weight:500;color:#B9AECD}
.prices-foot{margin-top:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);color:#D3C8E6;font-size:.95rem}
.prices-foot a{color:#fff;font-weight:600}
/* Clients strip */
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.clients .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 44px;color:var(--ink-2)}
.clients ul{display:flex;flex-wrap:wrap;gap:12px 40px;list-style:none;font-weight:700;font-size:1.2rem;color:#625A73}
/* Offers: 2x2, maintenance highlighted as the core */
.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px}
.offer{background:var(--bg-2);border-radius:var(--r-xl);padding:36px;display:flex;flex-direction:column}
.offer h3{font-size:1.9rem;margin-bottom:10px}
.offer p{color:var(--ink-2)}
.offer ul{list-style:none;margin:20px 0 28px;display:grid;gap:8px}
.offer ul li{padding-left:26px;position:relative}
.offer ul li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:7px;border-left:2.5px solid var(--mint);border-bottom:2.5px solid var(--mint);transform:rotate(-45deg)}
.offer .bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chip{display:inline-block;padding:.35em .9em;border-radius:999px;background:#fff;font-weight:700}
.offer .more{font-weight:600;text-underline-offset:5px}
.offer.core{background:var(--ink);color:#fff}
.offer.core p,.offer.core ul{color:#D3C8E6}
.offer.core .chip{background:var(--coral);color:var(--ink)}
.offer.core .tag{display:inline-block;align-self:flex-start;margin-bottom:18px;padding:.25em .8em;border-radius:999px;background:rgba(255,255,255,.1);font-size:.9rem;font-weight:600;color:#fff}
@media (max-width:820px){
.offer-grid{grid-template-columns:1fr}
.offer{padding:28px}
}
.also{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.also a{display:inline-flex;gap:10px;padding:.55em 1.1em;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500}
.also a b{font-weight:700;color:var(--coral-ink)}
.also a:hover{border-color:var(--ink)}
/* Solo */
.solo{background:var(--bg-2)}
.solo .wrap{display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:center}
.portrait{aspect-ratio:1;border-radius:50%;background:var(--mint-pale);border:2px dashed var(--mint);display:grid;place-items:center;text-align:center;color:var(--ink-2);padding:30px}
.solo blockquote{font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.02em;max-width:24ch}
.solo p{margin-top:24px;color:var(--ink-2);max-width:60ch}
.solo .sign{color:var(--ink);font-weight:600}
@media (max-width:880px){
.solo .wrap{grid-template-columns:1fr;gap:40px}
.portrait{max-width:240px}
}
/* Cases */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px}
.case{border:1px solid var(--line);border-radius:var(--r-xl);padding:32px;display:flex;flex-direction:column}
.case .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.case h3{font-size:1.7rem;margin-bottom:10px}
.case p{color:var(--ink-2)}
.case a{margin-top:20px;font-weight:600;text-underline-offset:5px}
@media (max-width:820px){
.case-grid{grid-template-columns:1fr}
}
.more-link{margin-top:28px;font-weight:600}
.more-link a{text-underline-offset:5px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:18px}
.tags li{padding:.2em .75em;border-radius:999px;background:var(--mint-pale);font-size:.9rem;font-weight:600}
ul.also{list-style:none}
.icon-lg{width:30px;height:30px}
/* Section bands */
.band{padding:88px 0}
/* Guarantees band */
.guarantees{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;background:#fff}
.guarantees ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.guarantees li{display:flex;gap:14px;align-items:flex-start}
.guarantees .icon{color:var(--mint);background:var(--mint-pale);padding:9px;width:48px;height:48px;border-radius:14px}
.guarantees span{color:var(--ink-2);font-size:.98rem;line-height:1.35}
.guarantees strong{display:block;font-size:1.08rem;color:var(--ink)}
@media (max-width:900px){
.guarantees ul{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
.guarantees ul{grid-template-columns:1fr}
}
/* Case cards with screenshots */
.case-visual{padding:0;overflow:hidden}
.case-visual .case-body{padding:26px 30px 30px;display:flex;flex-direction:column;flex:1}
.case-visual .case-body a{margin-top:auto;padding-top:18px}
.browser{background:var(--bg-2);border-bottom:1px solid var(--line);padding:12px 14px 0}
.browser-bar{display:flex;gap:6px;margin-bottom:10px}
.browser-bar span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.browser img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px 10px 0 0;transition:transform .5s}
.case-visual:hover .browser img{transform:scale(1.03)}
@media (prefers-reduced-motion:no-preference){
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * 90ms)}
.js [data-reveal].is-visible{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
.case-visual:hover .browser img{transform:none}
}
.plan-price .amount,.report-uptime .big,.panel .price{font-weight:700}
/* Section header */
.section-head{max-width:62ch}
.section-head .intro{margin-top:14px}
/* Steps with icons (a real sequence) */
.timeline{list-style:none;counter-reset:t;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:48px;position:relative}
.timeline li{counter-increment:t;position:relative;padding-top:64px}
.timeline li::before{content:"";position:absolute;top:26px;left:52px;right:-24px;height:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .t-icon{position:absolute;top:0;left:0;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;z-index:1}
.timeline .t-icon::after{content:counter(t);position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--coral);color:var(--ink);font:700 .8rem/22px "Outfit",sans-serif;text-align:center}
.timeline li.key .t-icon{background:var(--coral);color:var(--ink)}
.timeline h3{font-size:1.2rem;margin-bottom:6px}
.timeline p{color:var(--ink-2);font-size:1rem}
@media (max-width:760px){
.timeline li::before{display:none}
}
/* Dark CTA band in the middle of pages */
.cta-band{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:40px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta-band h2{font-size:clamp(1.5rem,2.6vw,2rem);color:#fff}
.cta-band p{color:#D3C8E6;margin-top:6px}
.cta-band .btn-primary{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.cta-band .btn-primary:hover{background:#fff;border-color:#fff}
/* ---- Home extras ---- */
.offer .offer-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;color:var(--mint);margin-bottom:18px}
.offer.core .offer-icon{background:rgba(255,255,255,.1);color:var(--coral)}
.offer .offer-icon .icon{width:26px;height:26px}
.offer{transition:transform .2s,box-shadow .2s}
.offer:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(53,27,93,.45)}
@media (prefers-reduced-motion:reduce){
.offer:hover{transform:none}
}
.status a{color:inherit;text-underline-offset:3px}
/* Client logos strip (home) */
.clients{padding:36px 0;border-top:1px solid var(--line);border-bottom:0}
.clients .wrap{display:block}
.clients-title{font:600 1rem "Saira Semi Condensed",sans-serif;letter-spacing:0;color:var(--ink-2);text-align:center;margin-bottom:22px}
.logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 56px}
.logos li{display:flex;align-items:center}
.logos a{display:block;border-radius:8px}
.logos img{display:block;height:46px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.6;mix-blend-mode:multiply;transition:filter .25s,opacity .25s}
.logos li:hover img,.logos a:focus-visible img{filter:none;opacity:1}
/* Light, saturated logos turn almost white in grayscale: darken them to match the others */
.logos img.logo-pale{filter:grayscale(1) brightness(.6) contrast(1.6)}
.logos li:hover img.logo-pale,.logos a:focus-visible img.logo-pale{filter:none}
@media (max-width:600px){
.logos{gap:22px 32px}
.logos img{height:36px;max-width:120px}
}
/* Logos strip: infinite scroll (JS only, so the pause button exists), paused on hover/focus or by the button */
.clients-head{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:22px}
.clients-head .clients-title{margin-bottom:0}
.marquee-toggle{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--ink-2);cursor:pointer;transition:border-color .15s,color .15s}
.marquee-toggle:hover{border-color:var(--ink);color:var(--ink)}
.marquee-toggle svg{width:14px;height:14px;fill:currentColor}
.marquee-toggle .i-play,.clients.is-paused .marquee-toggle .i-pause{display:none}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee .logos{flex-wrap:nowrap;justify-content:flex-start;padding-right:56px}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track,.clients.is-paused .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:600px){
.marquee .logos{padding-right:32px}
.marquee-track{animation-duration:30s}
}
/* No JS or reduced motion: static, wrapped list */
:root:not(.js) .marquee-track{animation:none;width:auto}
:root:not(.js) .marquee{-webkit-mask-image:none;mask-image:none}
:root:not(.js) .marquee .logos{flex-wrap:wrap;justify-content:center;padding-right:0}
:root:not(.js) .marquee .logos[aria-hidden]{display:none}
@media (prefers-reduced-motion:reduce){
.marquee-track{animation:none;width:auto}
.marquee{-webkit-mask-image:none;mask-image:none}
.marquee .logos{flex-wrap:wrap;justify-content:center;padding-right:0}
.marquee .logos[aria-hidden]{display:none}
.marquee-toggle{display:none}
}
/* Real portrait on the home page */
.portrait-photo{display:block;width:100%;max-width:360px;height:auto;padding:0;border:0;background:none;border-radius:50%;box-shadow:0 30px 60px -30px rgba(53,27,93,.45)}
.solo blockquote{font-family:"Outfit","Saira Semi Condensed",sans-serif;font-weight:600;letter-spacing:-.02em}
.hero h1{font-size:clamp(2.4rem,4.6vw,4.1rem)}
.status>span{display:inline}
/* Section titles: wider than the default 18ch so they rarely wrap */
.section-head{max-width:none}
.section-head .h2{max-width:none}
.section-head .intro{max-width:62ch}