@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap');

:root{
    --primary:#6b5cff;
    --primary-dark:#5545eb;
    --primary-soft:#efedff;
    --accent:#ff7c5c;
    --success:#20b486;
    --danger:#e5484d;
    --warning:#f0a202;
    --dark:#1a2030;
    --text:#252b3a;
    --muted:#747c90;
    --bg:#f6f7fb;
    --surface:#fff;
    --border:#e6e8f0;
    --shadow:0 24px 70px rgba(35,41,65,.10);
    --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(230,232,240,.8)}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800}
.brand-mark{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#9e65ff);box-shadow:0 10px 25px rgba(107,92,255,.3)}
.main-nav{display:flex;align-items:center;gap:18px}
.main-nav a{font-weight:600;color:#41495e}
.main-nav a:hover{color:var(--primary)}
.menu-toggle{display:none;border:0;background:var(--primary-soft);border-radius:12px;padding:9px 12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 20px;font-weight:700;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;box-shadow:0 12px 28px rgba(107,92,255,.25)}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--text)}
.btn-danger{background:#fff0f0;color:var(--danger)}
.btn-success{background:#e9fbf5;color:#138660}
.btn-sm{padding:9px 14px;border-radius:12px}
.hero{padding:70px 0 45px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.hero-copy h1{font-size:clamp(40px,6vw,72px);line-height:1.05;margin:0 0 20px;letter-spacing:-2px}
.gradient-text{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;color:transparent}
.hero-copy p{font-size:19px;line-height:1.9;color:var(--muted);max-width:650px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-card{position:relative;background:linear-gradient(135deg,#242a3b,#4b3f90);border-radius:38px;padding:22px;min-height:470px;box-shadow:var(--shadow);overflow:hidden}
.hero-card:before,.hero-card:after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}
.hero-card:before{width:220px;height:220px;background:rgba(255,124,92,.32);top:-70px;left:-50px}
.hero-card:after{width:180px;height:180px;background:rgba(107,92,255,.45);bottom:-40px;right:-50px}
.hero-card img{width:100%;height:425px;object-fit:cover;border-radius:28px;position:relative;z-index:1}
.floating-note{position:absolute;z-index:2;background:rgba(255,255,255,.95);padding:14px 18px;border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.15);font-weight:700}
.note-one{top:28px;right:28px}.note-two{bottom:28px;left:28px}
.section{padding:55px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}
.section-head h2{font-size:34px;margin:0}
.section-head p{margin:6px 0 0;color:var(--muted)}
.search-panel{background:#fff;padding:16px;border-radius:20px;box-shadow:var(--shadow);display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px}
.form-control{width:100%;border:1px solid var(--border);background:#fff;border-radius:14px;padding:13px 15px;outline:none;transition:.2s}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(107,92,255,.12)}
.form-group{display:grid;gap:7px}
.form-group label{font-weight:700;font-size:14px}
.form-card{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.form-grid .full{grid-column:1/-1}
textarea.form-control{min-height:130px;resize:vertical}
.auth-shell{min-height:calc(100vh - 150px);display:grid;place-items:center;padding:50px 16px}
.auth-card{width:min(560px,100%);background:#fff;border-radius:30px;padding:32px;box-shadow:var(--shadow)}
.auth-card h1{margin-top:0}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.animal-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 16px 45px rgba(34,40,61,.08);transition:.25s}
.animal-card:hover{transform:translateY(-7px);box-shadow:0 24px 55px rgba(34,40,61,.14)}
.animal-thumb{height:240px;position:relative;overflow:hidden}
.animal-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.animal-card:hover .animal-thumb img{transform:scale(1.05)}
.badge{display:inline-flex;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800}
.badge-primary{background:var(--primary-soft);color:var(--primary)}
.badge-success{background:#e9fbf5;color:#14845f}
.badge-warning{background:#fff5df;color:#a96b00}
.badge-danger{background:#fff0f0;color:var(--danger)}
.animal-status{position:absolute;top:14px;right:14px}
.animal-body{padding:19px}
.animal-body h3{margin:0 0 8px;font-size:21px}
.meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.card-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:0 14px 36px rgba(34,40,61,.06)}
.stat-card strong{display:block;font-size:32px;margin-top:8px}
.dashboard-layout{display:grid;grid-template-columns:260px 1fr;gap:25px;padding:32px 0}
.sidebar{background:#1d2434;color:#fff;border-radius:26px;padding:20px;height:max-content;position:sticky;top:100px}
.sidebar a{display:flex;padding:12px 14px;border-radius:13px;margin-bottom:6px;color:#d9ddec}
.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.11);color:#fff}
.dashboard-main{min-width:0}
.table-wrap{overflow:auto;background:#fff;border-radius:22px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:850px}
th,td{padding:15px;border-bottom:1px solid var(--border);text-align:right}
th{background:#fafbfe;font-size:13px;color:var(--muted)}
.table-img{width:58px;height:58px;border-radius:14px;object-fit:cover}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.details-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px}
.gallery-main{height:520px;border-radius:28px;overflow:hidden;background:#ddd}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.detail-card{background:#fff;border-radius:28px;padding:28px;box-shadow:var(--shadow)}
.detail-card h1{font-size:38px;margin:8px 0 12px}
.detail-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}
.detail-item{background:var(--bg);padding:14px;border-radius:15px}
.profile-head{display:flex;align-items:center;gap:18px}
.avatar{width:86px;height:86px;border-radius:24px;object-fit:cover;background:var(--primary-soft)}
.empty{background:#fff;border:2px dashed var(--border);border-radius:24px;padding:50px;text-align:center;color:var(--muted)}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:25px}
.pagination a{background:#fff;padding:9px 13px;border-radius:11px;border:1px solid var(--border)}
.pagination a.active{background:var(--primary);color:#fff}
.toast{position:fixed;top:90px;left:24px;z-index:100;padding:14px 18px;border-radius:14px;color:#fff;box-shadow:var(--shadow)}
.toast.success{background:var(--success)}.toast.error{background:var(--danger)}.toast.warning{background:var(--warning)}
.site-footer{margin-top:60px;background:#161c29;color:#d5d9e4;padding:45px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}
.site-footer a{display:block;margin:8px 0;color:#b8becc}
.footer-bottom{text-align:center;padding:18px;border-top:1px solid rgba(255,255,255,.08);margin-top:30px}
.brand-footer{color:#fff}
@media(max-width:900px){
    .hero-grid,.details-grid,.dashboard-layout{grid-template-columns:1fr}
    .cards-grid{grid-template-columns:repeat(2,1fr)}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .sidebar{position:static}
    .search-panel{grid-template-columns:1fr 1fr}
    .menu-toggle{display:block}
    .main-nav{display:none;position:absolute;top:76px;right:16px;left:16px;background:#fff;padding:18px;border-radius:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
    .main-nav.open{display:flex}
}
@media(max-width:600px){
    .cards-grid,.stats-grid,.form-grid,.search-panel,.detail-list,.footer-grid{grid-template-columns:1fr}
    .hero{padding-top:35px}
    .hero-card{min-height:360px}.hero-card img{height:320px}
    .animal-thumb{height:220px}
    .form-card,.auth-card,.detail-card{padding:20px}
    .section-head{align-items:start;flex-direction:column}
}

/* =========================================================
   Home Page Improvements
   ========================================================= */

body {
    direction: rtl;
    overflow-x: hidden;
}

.trust-bar {
    background: var(--dark);
    color: #fff;
    font-size: 13px;
}

.trust-bar-content {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.trust-message,
.trust-items {
    display: flex;
    align-items: center;
    gap: 16px;
}

.trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #39d79f;
    box-shadow: 0 0 0 6px rgba(57, 215, 159, .12);
}

.trust-items span {
    color: #d8dcea;
}

/* Hero */

.hero {
    position: relative;
    padding: 90px 0 90px;
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(107, 92, 255, .12),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 45%,
            rgba(255, 124, 92, .10),
            transparent 27%
        );
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 130px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(246, 247, 251, .88)
    );
}

.hero-grid {
    position: relative;
    z-index: 2;
}

.hero-copy {
    position: relative;
}

.hero-eyebrow {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 9px 14px;
    border: 1px solid rgba(107, 92, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 35px rgba(107, 92, 255, .08);
}

.hero-eyebrow-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
}

.hero-copy h1 {
    max-width: 760px;
    font-size: clamp(43px, 5.3vw, 76px);
    line-height: 1.08;
    letter-spacing: -2.7px;
}

.hero-copy p {
    max-width: 670px;
    margin: 0;
    font-size: 18px;
    line-height: 1.95;
}

.btn-large {
    min-height: 54px;
    padding: 14px 23px;
    border-radius: 16px;
}

.btn-arrow {
    font-size: 20px;
    transition: transform .2s ease;
}

.btn-primary:hover .btn-arrow {
    transform: translateX(-4px);
}

.hero-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
    margin-top: 40px;
}

.hero-benefit {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(230, 232, 240, .9);
    border-radius: 17px;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(13px);
}

.hero-benefit .benefit-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--primary-soft);
    font-size: 18px;
}

.hero-benefit strong,
.hero-benefit small {
    display: block;
}

.hero-benefit strong {
    margin-bottom: 2px;
    font-size: 13px;
}

.hero-benefit small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hero-visual {
    position: relative;
    padding: 15px;
}

.hero-card {
    min-height: 540px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 42px;
    background: linear-gradient(145deg, #242a3b, #594cb0);
    box-shadow:
        0 45px 100px rgba(43, 40, 78, .23),
        0 12px 30px rgba(43, 40, 78, .12);
}

.hero-card img {
    height: 510px;
    border-radius: 32px;
}

.hero-image-overlay {
    position: absolute;
    inset: 14px;
    z-index: 2;
    border-radius: 32px;
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            rgba(18, 22, 35, .72),
            transparent 38%
        );
}

.floating-note {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    font-size: 14px;
    animation: floatCard 4s ease-in-out infinite;
}

.floating-note strong,
.floating-note small {
    display: block;
}

.floating-note strong {
    margin-bottom: 2px;
    color: var(--text);
}

.floating-note small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.floating-icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.heart-icon {
    background: #fff0f0;
    color: var(--danger);
}

.location-icon {
    background: var(--primary-soft);
    color: var(--primary);
}

.note-one {
    top: 35px;
    /*right: -30px;*/
}

.note-two {
    bottom: 92px;
    /*left: -38px;*/
    animation-delay: -2s;
}

.hero-pet-info {
    position: absolute;
    right: 35px;
    bottom: 31px;
    left: 35px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.hero-pet-info div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pet-available-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #53e0a9;
    box-shadow: 0 0 0 6px rgba(83, 224, 169, .15);
}

.hero-decoration {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(1px);
}

.hero-decoration-one {
    width: 130px;
    height: 130px;
    top: -15px;
    left: -25px;
    background: rgba(255, 124, 92, .2);
}

.hero-decoration-two {
    width: 105px;
    height: 105px;
    right: -18px;
    bottom: -12px;
    background: rgba(107, 92, 255, .18);
}

@keyframes floatCard {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* Search */

.search-section {
    position: relative;
    z-index: 5;
    margin-top: -27px;
}

.search-box {
    padding: 22px;
    border: 1px solid rgba(230, 232, 240, .85);
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 28px 70px rgba(35, 41, 65, .11),
        0 5px 18px rgba(35, 41, 65, .05);
    backdrop-filter: blur(16px);
}

.search-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 17px;
}

.search-heading-icon {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 25px;
    font-weight: 800;
}

.search-heading span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.search-heading h2 {
    margin: 2px 0 0;
    font-size: 22px;
}

.search-panel {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: 1.5fr 1fr 1fr auto;
    align-items: end;
}

.search-field {
    display: grid;
    gap: 7px;
}

.search-field label {
    padding-inline-start: 3px;
    color: #3b4355;
    font-size: 13px;
    font-weight: 800;
}

.input-with-icon {
    position: relative;
}

.input-with-icon > span {
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 2;
    color: var(--muted);
    transform: translateY(-50%);
}

.input-with-icon .form-control {
    padding-right: 43px;
}

.search-panel .form-control {
    min-height: 51px;
    background: #fbfbfd;
}

.search-button {
    min-height: 51px;
    padding-inline: 27px;
}

/* Common headings */

.section-label {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}

.stats-intro,
.center-section-head {
    max-width: 680px;
    margin: 0 auto 32px;
    text-align: center;
}

.stats-intro h2,
.center-section-head h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 40px);
}

.stats-intro p,
.center-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

/* Stats */

.stats-section {
    padding-top: 90px;
}

.stat-card {
    position: relative;
    min-height: 160px;
    display: flex;
    align-items: center;
    gap: 17px;
    overflow: hidden;
    padding: 23px;
    border: 1px solid transparent;
    transition: transform .25s ease, box-shadow .25s ease;
}

.stat-card::after {
    content: "";
    position: absolute;
    width: 105px;
    height: 105px;
    left: -37px;
    bottom: -42px;
    border-radius: 50%;
    background: currentColor;
    opacity: .05;
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 55px rgba(34, 40, 61, .11);
}

.stat-icon {
    width: 61px;
    height: 61px;
    flex: 0 0 61px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    font-size: 25px;
}

.stat-content {
    position: relative;
    z-index: 2;
}

.stat-content span,
.stat-content small {
    display: block;
}

.stat-content span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.stat-content strong {
    margin: 3px 0;
    font-size: 34px;
    line-height: 1.1;
}

.stat-content small {
    color: var(--muted);
    font-size: 11px;
}

.stat-purple {
    color: var(--primary);
    border-color: rgba(107, 92, 255, .12);
}

.stat-purple .stat-icon {
    background: var(--primary-soft);
}

.stat-green {
    color: var(--success);
    border-color: rgba(32, 180, 134, .14);
}

.stat-green .stat-icon {
    background: #e9fbf5;
}

.stat-orange {
    color: var(--accent);
    border-color: rgba(255, 124, 92, .15);
}

.stat-orange .stat-icon {
    background: #fff0eb;
}

.stat-blue {
    color: #3478dc;
    border-color: rgba(52, 120, 220, .14);
}

.stat-blue .stat-icon {
    background: #edf5ff;
}

/* Animal cards */

.animals-section {
    padding-top: 80px;
}

.section-head h2 {
    margin-top: 3px;
}

.animal-card {
    position: relative;
    border: 1px solid rgba(230, 232, 240, .86);
}

.animal-card-link {
    display: block;
    height: 100%;
}

.animal-thumb {
    height: 275px;
}

.animal-image-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(19, 24, 37, .68),
        transparent 46%
    );
}

.animal-top-badges {
    position: absolute;
    top: 15px;
    right: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.status-pulse {
    width: 7px;
    height: 7px;
    margin-left: 5px;
    border-radius: 50%;
    background: #19a678;
    box-shadow: 0 0 0 4px rgba(25, 166, 120, .12);
}

.featured-badge {
    background: rgba(26, 32, 48, .8);
    color: #fff;
    backdrop-filter: blur(9px);
}

.animal-location {
    position: absolute;
    right: 16px;
    bottom: 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.animal-body {
    padding: 21px;
}

.animal-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.animal-type {
    display: block;
    margin-bottom: 3px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.animal-title-row h3 {
    margin: 0;
    font-size: 23px;
}

.animal-arrow {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 18px;
    transition: .2s;
}

.animal-card:hover .animal-arrow {
    transform: translateX(-4px);
    background: var(--primary);
    color: #fff;
}

.animal-description {
    min-height: 51px;
    margin: 13px 0 17px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.animal-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.animal-detail {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border-radius: 13px;
    background: var(--bg);
}

.animal-detail-icon {
    color: var(--primary);
}

.animal-detail small,
.animal-detail strong {
    display: block;
}

.animal-detail small {
    color: var(--muted);
    font-size: 10px;
}

.animal-detail strong {
    overflow: hidden;
    margin-top: 1px;
    color: var(--text);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.animal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.animal-footer strong {
    color: var(--primary);
    font-size: 13px;
}

.animals-empty {
    display: grid;
    justify-items: center;
    gap: 11px;
}

.animals-empty h3 {
    margin: 5px 0 0;
    color: var(--text);
    font-size: 23px;
}

.animals-empty p {
    margin: 0 0 8px;
}

.empty-icon {
    width: 75px;
    height: 75px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: var(--primary-soft);
    font-size: 32px;
}

/* Process */

.process-section {
    margin-top: 20px;
    padding: 90px 0;
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.process-card {
    position: relative;
    min-height: 270px;
    padding: 29px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 25px;
    background: #fff;
    transition: .25s;
}

.process-card:hover {
    transform: translateY(-6px);
    border-color: rgba(107, 92, 255, .27);
    box-shadow: 0 24px 55px rgba(35, 41, 65, .09);
}

.process-number {
    position: absolute;
    top: 16px;
    left: 19px;
    color: rgba(107, 92, 255, .12);
    font-size: 46px;
    font-weight: 800;
}

.process-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 18px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 26px;
}

.process-card h3 {
    margin: 0 0 10px;
    font-size: 21px;
}

.process-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85;
}

.process-connector {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
}

/* Features */

.features-section {
    padding: 100px 0;
}

.features-layout {
    display: grid;
    grid-template-columns: 1fr .92fr;
    align-items: center;
    gap: 70px;
}

.features-content h2 {
    margin: 0 0 17px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.3;
}

.features-description {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.9;
}

.features-list {
    display: grid;
    gap: 15px;
    margin: 29px 0;
}

.feature-item {
    display: flex;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .75);
}

.feature-check {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e9fbf5;
    color: var(--success);
    font-weight: 900;
}

.feature-item h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.feature-item p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.features-visual {
    position: relative;
}

.features-image-card {
    position: relative;
    padding: 13px;
    border-radius: 36px;
    background: #fff;
    box-shadow: var(--shadow);
}

.features-image-card img {
    width: 100%;
    height: 510px;
    object-fit: cover;
    border-radius: 27px;
}

.success-floating-card {
    position: absolute;
    right: -36px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 19px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(35, 41, 65, .16);
}

.success-floating-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff0f0;
    color: var(--danger);
    font-size: 20px;
}

.success-floating-card strong,
.success-floating-card small {
    display: block;
}

.success-floating-card strong {
    color: var(--text);
    font-size: 20px;
}

.success-floating-card small {
    color: var(--muted);
    font-size: 11px;
}

/* Story */

.story-section {
    padding: 30px 0 90px;
}

.story-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    overflow: hidden;
    border-radius: 35px;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 124, 92, .16),
            transparent 30%
        ),
        linear-gradient(135deg, #292641, #4e4294);
    color: #fff;
    box-shadow: 0 35px 90px rgba(46, 41, 85, .24);
}

.story-quote {
    position: absolute;
    top: -28px;
    right: 35px;
    color: rgba(255, 255, 255, .08);
    font-family: Georgia, serif;
    font-size: 180px;
    line-height: 1;
}

.story-content {
    position: relative;
    z-index: 2;
    padding: 60px;
}

.section-label-light {
    color: #c8c2ff;
}

.story-content h2 {
    max-width: 600px;
    margin: 0 0 19px;
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.35;
}

.story-content > p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: 16px;
    line-height: 2;
}

.story-author {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 27px;
}

.story-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    background: rgba(255, 255, 255, .12);
    font-size: 18px;
    font-weight: 800;
}

.story-author strong,
.story-author small {
    display: block;
}

.story-author small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .6);
}

.story-image {
    min-height: 430px;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Final CTA */

.final-cta-section {
    padding-top: 25px;
    padding-bottom: 70px;
}

.final-cta {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    padding: 43px;
    border-radius: 31px;
    background: linear-gradient(
        135deg,
        var(--primary),
        #8b5cf6
    );
    color: #fff;
    box-shadow: 0 30px 75px rgba(107, 92, 255, .27);
}

.final-cta-icon {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 23px;
    background: rgba(255, 255, 255, .14);
    font-size: 33px;
}

.final-cta-content {
    position: relative;
    z-index: 2;
}

.final-cta-content > span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 700;
}

.final-cta-content h2 {
    margin: 0 0 8px;
    font-size: clamp(25px, 3vw, 36px);
}

.final-cta-content p {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    line-height: 1.7;
}

.final-cta-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
}

.cta-white-button {
    background: #fff;
    color: var(--primary);
}

.cta-outline-button {
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.cta-decoration {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}

.cta-decoration-one {
    width: 190px;
    height: 190px;
    top: -100px;
    left: 8%;
}

.cta-decoration-two {
    width: 140px;
    height: 140px;
    right: -45px;
    bottom: -75px;
}

/* Responsive */

@media (max-width: 1100px) {
    .hero-benefits {
        grid-template-columns: 1fr;
        max-width: 470px;
    }

    .hero-card {
        min-height: 490px;
    }

    .hero-card img {
        height: 460px;
    }

    .note-one {
        right: -5px;
    }

    .note-two {
        left: -5px;
    }

    .features-layout {
        gap: 40px;
    }

    .final-cta {
        grid-template-columns: auto 1fr;
    }

    .final-cta-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 900px) {
    .trust-items {
        display: none;
    }

    .hero {
        padding-top: 55px;
    }

    .hero-copy {
        text-align: center;
    }

    .hero-copy h1,
    .hero-copy p,
    .hero-benefits {
        margin-inline: auto;
    }

    .hero-eyebrow {
        margin-inline: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        width: min(650px, 100%);
        margin: 20px auto 0;
    }

    .search-panel {
        grid-template-columns: 1fr 1fr;
    }

    .search-field-large {
        grid-column: 1 / -1;
    }

    .search-button {
        width: 100%;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-connector {
        margin: -3px auto;
        transform: rotate(-90deg);
    }

    .process-card {
        min-height: auto;
    }

    .features-layout {
        grid-template-columns: 1fr;
    }

    .features-content {
        text-align: center;
    }

    .feature-item {
        text-align: right;
    }

    .features-image-card {
        width: min(650px, 100%);
        margin: auto;
    }

    .success-floating-card {
        right: 25px;
    }

    .story-card {
        grid-template-columns: 1fr;
    }

    .story-content {
        padding: 43px;
    }

    .story-image {
        min-height: 360px;
    }
}

@media (max-width: 700px) {
    .hero-copy h1 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .hero-copy p {
        font-size: 16px;
    }

    .hero-benefit {
        text-align: right;
    }

    .hero-card {
        min-height: 420px;
        border-radius: 30px;
    }

    .hero-card img {
        height: 390px;
        border-radius: 22px;
    }

    .hero-image-overlay {
        border-radius: 22px;
    }

    .floating-note {
        min-width: 165px;
        padding: 10px;
    }

    .note-one {
        top: 26px;
        /*right: 25px;*/
    }

    .note-two {
        bottom: 85px;
        left: 25px;
    }

    .search-section {
        margin-top: -5px;
    }

    .search-box {
        padding: 18px;
        border-radius: 22px;
    }

    .search-panel {
        grid-template-columns: 1fr;
    }

    .search-field-large {
        grid-column: auto;
    }

    .animal-details {
        grid-template-columns: 1fr;
    }

    .animal-detail {
        padding: 11px 13px;
    }

    .animal-description {
        min-height: auto;
    }

    .features-image-card img {
        height: 390px;
    }

    .story-content {
        padding: 32px 24px;
    }

    .final-cta {
        grid-template-columns: 1fr;
        padding: 31px 23px;
        text-align: center;
    }

    .final-cta-icon {
        margin: auto;
    }

    .final-cta-actions {
        grid-column: auto;
        justify-content: center;
        flex-wrap: wrap;
    }

    .final-cta-actions .btn {
        flex: 1;
        min-width: 145px;
    }
}

@media (max-width: 480px) {
    .container {
        width: min(100% - 22px, 1180px);
    }

    .trust-message {
        width: 100%;
        justify-content: center;
        text-align: center;
        font-size: 11px;
    }

    .hero {
        padding-top: 38px;
    }

    .hero-copy h1 {
        font-size: 35px;
    }

    .hero-actions {
        display: grid;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-visual {
        padding: 0;
    }

    .hero-card {
        min-height: 350px;
        padding: 9px;
    }

    .hero-card img {
        height: 332px;
    }

    .hero-image-overlay {
        inset: 9px;
    }

    .floating-note {
        min-width: 0;
        max-width: 150px;
    }

    .floating-note small {
        display: none;
    }

    .floating-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .note-one {
        top: 20px;
        right: 17px;
    }

    .note-two {
        bottom: 67px;
        left: 17px;
    }

    .hero-pet-info {
        right: 22px;
        bottom: 22px;
        left: 22px;
        font-size: 11px;
    }

    .hero-pet-info > span:last-child {
        display: none;
    }

    .search-heading h2 {
        font-size: 19px;
    }

    .section {
        padding-block: 45px;
    }

    .stats-section {
        padding-top: 68px;
    }

    .animal-thumb {
        height: 250px;
    }

    .animal-footer span {
        display: none;
    }

    .animal-footer {
        justify-content: flex-end;
    }

    .features-image-card img {
        height: 315px;
    }

    .success-floating-card {
        right: 15px;
        bottom: 18px;
    }

    .story-image {
        min-height: 285px;
    }
}