:root {
  --ink: #153742;
  --muted: #62757b;
  --teal: #008d88;
  --teal-dark: #006a70;
  --cyan: #08a8c4;
  --orange: #ff7a21;
  --pink: #d92e70;
  --berry: #7d0d5e;
  --paper: #ffffff;
  --mist: #f4f8f8;
  --line: #dce8e7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.section-shell, .nav-shell, .hero-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header { height: 74px; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(0,106,112,.12); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); }
.nav-shell { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 820; letter-spacing: -.8px; }
.brand > span:last-child > span { color: var(--berry); }
.brand-mark { width: 42px; height: 42px; border: 2px solid var(--teal); border-radius: 50%; overflow: hidden; display: inline-block; background: white; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; transform: scale(1.35); }
nav { display: flex; gap: 34px; margin-left: auto; }
nav a { color: #425c63; font-size: 14px; font-weight: 650; }
nav a:hover { color: var(--teal); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .language { height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 10px; color: var(--ink); }
.icon-button { width: 40px; font-size: 24px; line-height: 1; }
.language { padding: 0 13px; font-size: 13px; font-weight: 750; }
.language span { color: var(--muted); margin-left: 4px; }

.hero { min-height: 570px; position: relative; overflow: hidden; color: white; background: linear-gradient(118deg, #006a70 0%, #008c8a 43%, #087e95 70%, #7d0d5e 132%); }
.hero:before { content:""; position:absolute; inset:0; opacity:.15; background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 1.2px); background-size: 28px 28px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.paint { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .75; }
.paint-one { width: 420px; height: 420px; background: var(--orange); right: -230px; top: -190px; }
.paint-two { width: 260px; height: 260px; background: var(--pink); left: -190px; bottom: -120px; }
.hero-shell { min-height: 570px; position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 60px; }
.hero-copy { padding: 62px 0 68px; }
.eyebrow { width: fit-content; padding: 7px 13px; border: 1px solid rgba(255,255,255,.33); border-radius: 999px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 750; letter-spacing: .25px; }
.eyebrow span { color: #ffbb74; margin-right: 5px; }
.hero h1 { font-size: clamp(44px, 5.2vw, 67px); line-height: 1.02; margin: 21px 0 18px; letter-spacing: -3.3px; }
.hero h1 em { color: #ffc18e; font-style: normal; }
.hero-copy > p { font-size: 17px; line-height: 1.65; max-width: 650px; color: rgba(255,255,255,.83); }
.search-box { margin-top: 30px; max-width: 620px; background: white; padding: 7px 7px 7px 18px; border-radius: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 20px 50px rgba(0,41,46,.25); }
.search-box > span { color: var(--teal); font-size: 27px; }
.search-box input { min-width: 0; flex: 1; height: 46px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-box button { height: 44px; border: 0; border-radius: 10px; padding: 0 23px; color: white; background: linear-gradient(135deg, var(--orange), #ff5d2a); font-weight: 760; cursor: default; }
.ad-banner { max-width: 620px; min-height: 76px; margin-top: 12px; padding: 13px 16px; position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.34); border-radius: 14px; background: linear-gradient(105deg,rgba(4,56,65,.78),rgba(0,115,103,.72)); color: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(0,38,43,.22); backdrop-filter: blur(9px); font-size: 11px; line-height: 1.25; animation: banner-breathe 2.4s ease-in-out infinite; }
.ad-banner:after { content:""; position:absolute; top:-45%; left:-30%; width:18%; height:190%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transform:skewX(-18deg); animation:banner-shine 3.4s ease-in-out infinite; pointer-events:none; }
.whatsapp-mark { width: 48px; height: 48px; flex: 0 0 48px; display:grid; place-items:center; position:relative; z-index:1; border:3px solid white; border-radius:50%; background:#20c96b; color:white; box-shadow:0 0 0 0 rgba(32,201,107,.55); font-size:23px; font-weight:900; transform:rotate(-12deg); animation:whatsapp-pulse 1.7s ease-out infinite; }
.whatsapp-mark:after { content:""; position:absolute; left:1px; bottom:-5px; width:11px; height:11px; background:#20c96b; clip-path:polygon(0 0,100% 0,0 100%); transform:rotate(8deg); }
.ad-copy { flex: 1 1 auto; position:relative; z-index:1; }.ad-copy strong,.ad-copy small { display:block; }.ad-copy strong { color: white; font-size:13px; margin-bottom:4px; }.ad-copy small { color:rgba(255,255,255,.72); font-size:10px; }.ad-phones { flex: 0 0 auto; position:relative; z-index:1; color: white; font-weight: 700; white-space: nowrap; }.ad-phones b { display:block; margin-bottom:4px; color: #87f2b5; font-size:10px; text-transform:uppercase; letter-spacing:.7px; }.ad-phones i { display: inline-block; width: 3px; height: 3px; margin: 0 4px 2px; border-radius: 50%; background: #ffc18e; }
@keyframes whatsapp-pulse { 0%{transform:rotate(-12deg) scale(1);box-shadow:0 0 0 0 rgba(32,201,107,.55)} 55%{transform:rotate(-4deg) scale(1.08);box-shadow:0 0 0 12px rgba(32,201,107,0)} 100%{transform:rotate(-12deg) scale(1);box-shadow:0 0 0 0 rgba(32,201,107,0)} }
@keyframes banner-shine { 0%,45%{left:-30%;opacity:0} 60%{opacity:1} 82%,100%{left:120%;opacity:0} }
@keyframes banner-breathe { 0%,100%{border-color:rgba(255,255,255,.27)} 50%{border-color:rgba(135,242,181,.72)} }
@media (prefers-reduced-motion: reduce) { .ad-banner,.ad-banner:after,.whatsapp-mark { animation:none; } }
.hero-meta { display: flex; align-items: center; gap: 19px; margin-top: 24px; color: rgba(255,255,255,.73); font-size: 12px; }
.hero-meta b { color: white; }.hero-meta i { width: 3px; height: 3px; background: #86dcd5; border-radius: 50%; }
.hero-art { position: relative; height: 430px; }
.logo-orbit { width: 360px; height: 360px; border-radius: 50%; position: absolute; top: 33px; left: 10px; overflow: hidden; border: 8px solid rgba(255,255,255,.18); box-shadow: 0 35px 80px rgba(0,39,44,.35); background: #fff; transform: rotate(3deg); }
.logo-orbit img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform: scale(1.08); }
.floating-card { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; background: white; color: var(--teal-dark); border-radius: 18px; box-shadow: 0 18px 36px rgba(0,41,46,.28); font-size: 25px; font-weight: 850; }
.floating-card small { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.card-a { top: 15px; right: -3px; transform: rotate(7deg); }.card-b { bottom: 10px; right: 17px; color: var(--berry); transform: rotate(-6deg); }.card-c { bottom: 42px; left: -25px; color: var(--orange); transform: rotate(5deg); }

.quick-section { padding: 60px 0 68px; background: #fff; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }
.kicker { color: var(--teal); font-size: 11px; font-weight: 850; letter-spacing: 1.7px; }
.section-heading h2, .catalog-intro h2 { margin: 6px 0 0; font-size: 31px; letter-spacing: -1.2px; }
.section-heading > a { font-size: 13px; color: var(--teal); font-weight: 780; }.section-heading > a span { margin-left: 7px; }
.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.quick-card { min-height: 118px; display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 30px rgba(16,63,69,.06); transition: transform .2s, box-shadow .2s; }
.quick-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(16,63,69,.12); }
.quick-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 13px; background: #e8f8f6; color: var(--teal); font-size: 20px; font-weight: 850; }
.q2 .quick-icon { color: var(--pink); background:#fff0f5 }.q3 .quick-icon { color: var(--teal-dark); background:#edf3fa }.q4 .quick-icon { color:var(--orange); background:#fff1e8 }
.quick-card h3 { font-size: 14px; margin: 0 0 4px; }.quick-card p { font-size: 11px; color: var(--muted); margin:0; line-height:1.35 }.quick-card b { color: #9ab1b4; margin-left:auto; }

.catalog { background: var(--mist); padding: 75px 0 86px; border-top: 1px solid #e6efef; }
.catalog-shell { display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 28px; align-items: start; }
.catalog-intro { margin-bottom: 35px; }.catalog-intro p { color: var(--muted); margin: 9px 0 0; font-size: 14px; }
.category { background: #fff; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 9px 32px rgba(20,59,65,.055); }
.category-block { display: contents; }
.sample-ad { min-height: 112px; margin: -5px 0 29px; padding: 16px 18px; display:flex; align-items:center; gap:16px; position:relative; overflow:hidden; border-radius:17px; color:white; box-shadow:0 10px 28px rgba(20,59,65,.11); }
.sample-ad:before { content:""; position:absolute; width:180px; height:180px; right:23%; top:-110px; border-radius:50%; background:rgba(255,255,255,.1); }
.sample-ad.fashion { background:linear-gradient(112deg,#752260,#c73679 60%,#f05b83); }.sample-ad.food { background:linear-gradient(112deg,#8d3b18,#d56b1e 60%,#f2a33a); }.sample-ad.tacos { background:linear-gradient(112deg,#17643f,#21985c 60%,#d3a323); }.sample-ad.vet { background:linear-gradient(112deg,#075f78,#078fa0 60%,#25b9a2); }
.sample-ad-icon { width:70px; height:70px; flex:0 0 70px; position:relative; z-index:1; display:grid; place-items:center; border-radius:18px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); font-size:35px; transform:rotate(-4deg); }
.sample-ad-message { min-width:185px; position:relative; z-index:1; }.sample-ad-message small,.sample-ad-message strong,.sample-ad-message em { display:block; }.sample-ad-message small { margin-bottom:4px; color:rgba(255,255,255,.7); font-size:8px; font-weight:850; letter-spacing:1px; }.sample-ad-message strong { font-size:19px; line-height:1.1; }.sample-ad-message em { margin-top:5px; color:rgba(255,255,255,.75); font-size:10px; font-style:normal; }
.sample-ad-offer { margin-left:auto; position:relative; z-index:1; padding:9px 12px; border:1px dashed rgba(255,255,255,.46); border-radius:9px; background:rgba(0,0,0,.09); font-size:12px; font-weight:800; text-align:center; }
.sample-ad-cta { min-width:112px; position:relative; z-index:1; padding:11px 13px; border-radius:10px; background:white; color:var(--ink); font-size:10px; font-weight:850; text-align:center; }.sample-ad-cta b { margin-left:4px; color:var(--orange); }
.category-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 25px 19px 28px; border-bottom: 1px solid var(--line); }
.category-head:before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--teal); }.category.orange .category-head:before { background:var(--orange) }.category.blue .category-head:before { background:#087eae }.category.pink .category-head:before { background:var(--pink) }
.category-head h3 { margin:0 0 5px; font-size:19px; }.category-head p { margin:0; color:var(--muted); font-size:12px; }.category-head a { color:var(--teal); font-size:12px; font-weight:750; white-space:nowrap; }.category.orange .category-head a { color:#dd5b0a }.category.pink .category-head a { color:var(--pink) }
.tools-grid { display:grid; grid-template-columns:repeat(3,1fr); padding: 10px 15px 18px; }
.tool-card { min-height:82px; display:flex; align-items:center; gap:12px; padding:15px 11px; border-radius:11px; }
.tool-card:hover { background:#f5fbfa; }.tool-icon { width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:#e8f7f5; color:var(--teal); display:grid; place-items:center; font-size:14px; font-weight:850; }.orange .tool-icon { color:#db5c10; background:#fff1e7 }.blue .tool-icon { color:#087eae; background:#e8f4f8 }.pink .tool-icon { color:var(--pink); background:#fff0f6 }
.tool-card strong, .tool-card small { display:block; }.tool-card strong { font-size:12px; margin-bottom:4px; }.tool-card small { color:var(--muted); font-size:10px; line-height:1.25 }.tool-card b { color:#b1c1c3; margin-left:auto; font-size:19px; }
.sidebar { position:sticky; top:98px; padding-top: 82px; }.sidebar-card, .tip-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 9px 30px rgba(20,59,65,.06); }
.sidebar-title { padding:20px; display:flex; gap:12px; align-items:center; background:linear-gradient(135deg,#006e73,#008f8b); color:white; }.sidebar-title > span { width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.15) }.sidebar-title small { font-size:9px; letter-spacing:1.3px; opacity:.7 }.sidebar-title h3 { font-size:18px; margin:2px 0 0; }
.sidebar ol { list-style:none;padding:7px 18px 12px;margin:0 }.sidebar li { min-height:55px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #edf2f2;font-size:12px }.sidebar li:last-child{border:0}.sidebar li > span{color:#9bb0b3;font-size:10px;font-weight:800}.sidebar li a{font-weight:680;flex:1}.sidebar li b{color:#b5c3c5;font-size:18px}
.tip-card { margin-top:20px; padding:24px; color:white; background:linear-gradient(145deg,#7d0d5e,#b3206e 65%,#e04b70); border:0; }.tip-paw{display:grid;width:40px;height:40px;place-items:center;background:rgba(255,255,255,.16);border-radius:12px}.tip-card h3{font-size:17px;margin:16px 0 8px}.tip-card p{font-size:12px;line-height:1.55;opacity:.78}.tip-card a{display:inline-block;margin-top:7px;font-size:11px;font-weight:780;color:#ffd8e8}

.trust { padding:65px 0; background:white; }.trust-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:60px }.trust-grid > div{text-align:center}.trust-grid span{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 15px;border-radius:14px;background:#eaf8f6;color:var(--teal);font-size:21px}.trust-grid > div:nth-child(2) span{background:#fff1e8;color:var(--orange)}.trust-grid > div:nth-child(3) span{background:#fff0f6;color:var(--pink)}.trust-grid h3{font-size:16px;margin:0 0 7px}.trust-grid p{margin:0;color:var(--muted);font-size:12px}
footer{background:#103b43;color:white;padding:58px 0 0}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:60px;padding-bottom:48px}.footer-brand{color:white}.footer-grid p{color:#9db5b9;font-size:12px;line-height:1.6}.footer-grid h4{font-size:13px;margin:0 0 16px}.footer-grid > div > a:not(.brand){display:block;color:#a9bdc1;font-size:11px;margin:10px 0}.footer-grid .footer-cta{display:inline-block!important;border:1px solid #3f6970;color:white!important;border-radius:9px;padding:10px 13px;margin-top:7px!important}.copyright{text-align:center;border-top:1px solid #29525a;padding:19px;color:#7f9da2;font-size:10px}.copyright span{color:#ff7394}

@media (max-width: 980px) {
  nav { display:none }.hero-shell{grid-template-columns:1fr}.hero-art{display:none}.hero{min-height:auto}.hero-shell{min-height:auto}.quick-grid{grid-template-columns:repeat(2,1fr)}.catalog-shell{grid-template-columns:1fr}.sidebar{position:static;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}.tip-card{margin:0}.tools-grid{grid-template-columns:repeat(2,1fr)}.sample-ad-offer{margin-left:0}.sample-ad{flex-wrap:wrap}.sample-ad-message{flex:1}.sample-ad-cta{margin-left:auto}
}
@media (max-width: 640px) {
  .section-shell,.nav-shell,.hero-shell{width:min(100% - 26px,1180px)}.site-header{height:66px}.brand{font-size:19px}.brand-mark{width:37px;height:37px}.language{display:none}.hero-copy{padding:48px 0 52px}.hero h1{font-size:43px;letter-spacing:-2.3px}.hero-copy>p{font-size:15px}.search-box{padding-left:13px}.search-box button{padding:0 14px}.ad-banner{min-height:104px;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px}.whatsapp-mark{width:43px;height:43px;flex-basis:43px}.ad-copy{flex:1 1 210px}.ad-phones{flex-basis:100%;padding-left:53px;white-space:normal}.ad-phones b{display:inline;margin:0 5px 0 0}.hero-meta{gap:10px;flex-wrap:wrap}.quick-section{padding:45px 0}.quick-grid{grid-template-columns:1fr}.section-heading h2,.catalog-intro h2{font-size:27px}.section-heading>a{display:none}.catalog{padding:55px 0}.category-head{align-items:flex-start}.category-head a{display:none}.tools-grid{grid-template-columns:1fr;padding:9px 13px}.sample-ad{padding:14px;gap:11px}.sample-ad-icon{width:56px;height:56px;flex-basis:56px;font-size:29px}.sample-ad-message{min-width:0}.sample-ad-message strong{font-size:16px}.sample-ad-offer{width:calc(100% - 123px);margin-left:67px}.sample-ad-cta{margin-left:0}.sidebar{grid-template-columns:1fr}.trust-grid{grid-template-columns:1fr;gap:35px}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}
}