:root{
      --primary:#14b8ff;
      --primary-dark:#0ea5e9;
      --ink:#0f172a;
      --muted:#64748b;
      --line:#e5e7eb;
      --card:#ffffff;

      --hero-a:#f8ecd6;
      --hero-b:#e9f4ff;

      --soft:#f6fbff;
      --soft2:#ecfeff;

      --radius:16px;
      --shadow:0 16px 45px rgba(2,6,23,.10);
      --shadow-sm:0 10px 25px rgba(2,6,23,.08);
    }

    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--ink);
      background:#fff;
    }

    a{ text-decoration:none; }

    /* ====== Navbar ====== */
    .woofio-navbar{
      background:#fff;
      padding:14px 0;
      box-shadow:0 2px 12px rgba(0,0,0,.04);
      position:sticky;
      top:0;
      z-index:50;
    }
    .navbar-brand img{ height:34px; }
    .navbar-nav{ gap:22px; }
    .navbar-nav .nav-link{
      font-size:14px;
      font-weight: 500;
      color:#0f172a;
      border-radius:10px;
      padding:8px 16px;
      white-space:nowrap;
      transition:.18s ease;
    }
    .navbar-nav .nav-link:hover{ background:#f3f4f6; }
    .navbar-nav .nav-link.active{
      background:var(--primary);
      color:#fff !important;
      border-radius:6px;
      padding:8px 15px;
    }
    .nav-login{ 
      /* color:#2563eb !important;  */
      font-weight:600; 
    }
    .btn-start{
      /* background:var(--primary); */
      /* color:#fff; */
      border:none;
      border-radius:5px;
      padding:10px 25px;
      font-size:14px;
      font-weight: 600;

      white-space:nowrap;
    }
    .btn-start:hover{ background:var(--primary-dark); color:#fff; }

    /* ====== Hero ====== */
    .hero{
      background:linear-gradient(90deg,var(--hero-a),var(--hero-b));
      padding:105px 0 80px;
      overflow:hidden;
    }
    .hero h1{
      font-size: 40px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -.9px;
      margin: 0 0 18px;
    }
    .hero .sub{
      font-size:18px;
      font-weight:700;
      color:#334155;
      margin-bottom:14px;
    }
    .hero .desc{
      font-size:14px;
      color:var(--muted);
      max-width:560px;
      line-height:1.8;
      margin-bottom:26px;
    }
    .btn-hero-primary{
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 20px 40px;
      font-weight: 600;
      font-size: 16px;
    }
    .btn-hero-primary:hover{ background:var(--primary-dark); color:#fff; }

    .btn-hero-ghost{
      background:#fff;
      color:#0f172a;
      border:1px solid var(--line);
      border-radius:10px;
      padding:20px 40px;
      font-weight:600;
      font-size:16px;
      box-shadow:0 10px 20px rgba(2,6,23,.06);
    }
    .btn-hero-ghost:hover{ background:#f8fafc; }

    .hero-art{
      position:relative;
      min-height:420px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .hero-blob{
      position:absolute;
      width:520px;
      height:335px;
      border-radius:22px;
      transform:rotate(10deg);
      opacity:.9;
    }
    .hero-blob.a{
      background:linear-gradient(260deg,#efdecc 50%,#d1e1de 50%);
      right:70px; top:42px;
    }
    .hero-blob.b{
      background:#ead9c8;
      right:28px; top:78px;
      opacity:.55;
    }
    .hero-img{
      position:relative;
      z-index:2;
      width:min(520px,100%);
      border-radius:18px;
      border:8px solid #fff;
      box-shadow:0 18px 55px rgba(2,6,23,.14);
    }

    /* ===== Common headings ===== */
    .section-title{
      font-weight: 600;
      font-size: 24px;
      margin: 0 0 10px;
    }
    .section-sub{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

    /* ====== Recently Lost Pets ====== */
    .lost-wrap{
      background:linear-gradient(180deg,#e9fbff 0%, #eafcff 100%);
      padding:55px 0 60px;
    }
    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:40px;
    }
    .btn-small{
      background:var(--primary);
      color:#fff;
      border:none;
      border-radius:10px;
      padding:14px 30px;
      font-size:12px;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .btn-small:hover{ background:var(--primary-dark); color:#fff; }
    .icon-16{ width:16px; height:16px; }

    .pet-card{
      background:var(--card);
      border-radius:16px;
      overflow:hidden;
      height:100%;
    }
    .pet-card .media{
      position:relative;
      height:300px;
      background:#e5e7eb;
    }
    .pet-card .media img{
      width:100%; height:100%;
      object-fit:cover; display:block;
    }
    .pill{
      position:absolute;
      top:14px;
      padding:6px 12px;
      border-radius:999px;
      font-size:11px;
      line-height:1;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .pill.left{ left:14px; background:rgba(255,238,238,.96); color:#b91c1c; }
    .pill.right{
      right:14px;
      background:rgba(99,102,241,.94);
      color:#fff;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .pet-card .body{ padding:16px 16px 18px; }
    .pet-name{ font-size:18px; font-weight:600; margin:0 0 18px; }
    .pet-meta{
      color:#475569;
      font-size:13px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .pet-meta .dot{ color:#94a3b8; }
    .info-row{
      display:flex;
      align-items:center;
      gap:10px;
      color:#334155;
      font-size:13px;
      margin-bottom:8px;
    }
    .info-ic{ width:18px; height:18px; color:var(--primary-dark); }
    .pet-desc{
      font-size:13px;
      color:#475569;
      margin:10px 0 14px;
      line-height:1.6;
    }
    .btn-card{
      background:var(--primary);
      border:none;
      color:#fff;
      font-weight:600;
      font-size:12px;
      padding:12px 12px;
      border-radius:10px;
      width:100%;
    }
    .btn-card:hover{ background:var(--primary-dark); color:#fff; }

    /* ====== Steps (How Woofio helps) ====== */
    .steps{
      padding:60px 0 30px;
      background:#fff;
    }
    .steps .center-head{
      text-align:center;
      margin-bottom:26px;
    }
    .step-item{
      text-align:center;
      padding:18px 10px;
    }
    .step-ic{
      width:60px; height:60px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-bottom:16px;
      border:1px solid rgba(20,184,255,.25);
    }
    .step-ic.one {
      background: var(--primary);
    }
    .step-ic.two {
      background: #4990e2;
    }
    .step-ic.three {
      background: #6a46c0;
    }
    .step-ic svg{ width:20px; height:20px; color: white; }
    .step-title{ font-weight:600; margin:0 0 10px; }
    .step-desc{ color:var(--muted); font-size:14px; margin:0; }

    /* ====== Woofio Protect block (IMPROVED) ====== */
    .protect{
        padding:60px 0;
        background:linear-gradient(90deg,#18b7ff 0%, #1f7dff 50%, #2d2ccf 100%);
        color:#fff;
    }

    .protect h2{
        font-weight:600;
        font-size:42px;
        line-height:1.1;
        margin:0;
    }

    .protect h2.activate{
        color:#fdba74; /* orange highlight */
        margin-top:6px;
        margin-bottom:35px;
    }

    .protect p{
        opacity:.92;
        font-size:15px;
        line-height:1.75;
        margin:0 0 22px;
        max-width:520px;
    }

    /* Checklist grid */
    .checklist {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px 18px;
        margin-top:16px;
        max-width:580px;
        margin-bottom: 40px;
    }

    /* Each row */
    .check{
        display:flex;
        align-items:flex-start;
        gap:14px;
        font-size:14px;
        line-height:1.55;
        opacity:.98;
    }

    /* Icon circle */
    .check .box{
        flex:0 0 46px;
        width:40px;
        height:40px;
        border-radius:8px;
        background:var(--primary);
        border:1px solid rgba(255,255,255,.18);
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /* Lucide icons */
    .check .box svg {
        width:18px;
        height:20px;
        color:#eaf7ff;
    }

    /* Button style - matches theme */
    .protect .btn-hero-primary{
        background: #14b8ff;
        border: none;
        color: #fff;
        padding: 17px 30px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 16px;
        box-shadow: 0 14px 26px rgba(20, 184, 255, .25);
    }
    .protect .btn-hero-primary:hover{
        background:#0ea5e9;
        color:#fff;
    }

    /* ===== Protect Pricing Card (matches screenshot) ===== */
    .pro-card{
        position:relative;
        background:#fff;
        color:var(--ink);
        border-radius:22px;
        box-shadow:0 22px 70px rgba(2,6,23,.22);
        border:1px solid rgba(2,6,23,.06);
        padding:34px 26px 22px;
        max-width:440px;
        margin-left:auto;
    }

    /* top floating badge */
    .pro-badge{
        position:absolute;
        top:-14px;
        left:50%;
        transform:translateX(-50%);
        background:#0ea5e9;
        color:#fff;
        font-size:10px;
        border-radius:999px;
        padding:8px 16px;
        display:flex;
        align-items:center;
        gap:8px;
    }

    .pro-badge-ic{
        width:14px;
        height:14px;
    }

    /* center block */
    .pro-center{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    /* icon square inside */
    .pro-icon{
        width:62px;
        height:62px;
        border-radius:16px;
        background:#eaf2ff;
        display:flex;
        align-items:center;
        justify-content:center;
        margin-top:6px;
    }

    .pro-icon svg{
        width:26px;
        height:26px;
        color:#2563eb;
    }

    .pro-title{
        font-weight: 700;
        font-size: 16px;
        margin: 16px 0 6px;
    }

    .pro-subtitle{
        font-size:13px;
        color:var(--muted);
        margin-bottom:20px;
    }

    /* price line */
    .pro-price{
        display:flex;
        align-items:baseline;
        gap:10px;
    }

    .pro-price .amount{
        font-size:30px;
        letter-spacing:-.8px;
        color:#0f172a;
    }

    .pro-price .currency{
        font-size:14px;
        color:#64748b;
    }

    .pro-small{
        font-size:10px;
        color:#64748b;
        margin-bottom:18px;
    }

    /* list */
    .pro-list{
        list-style:none;
        padding:0;
        margin:22px 0 20px;
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .pro-list li{
        display:flex;
        align-items:flex-start;
        gap:12px;
        font-size:13px;
        color:#334155;
    }

    /* green check bubble */
    .pro-list li svg{
        width:22px;
        height:22px;
        color:#16a34a;
        background:#dcfce7;
        border-radius:999px;
        padding:4px;
        flex:0 0 22px;
        margin-top:1px;
    }

    /* CTA button */
    .pro-btn{
        width:100%;
        border:none;
        background:var(--primary);
        color:#fff;
        font-size:13px;
        padding:14px 14px;
        border-radius:12px;
    }

    .pro-btn:hover{
        background:var(--primary-dark);
        color:#fff;
    }

    /* footer note */
    .pro-foot{
        text-align:center;
        margin-top:14px;
        font-size:11px;
        color:#94a3b8;
    }

    /* ====== Found Pets ====== */
    .found{
      padding:55px 0 65px;
      background:#eafcff;
    }
    .btn-outline-soft{
      background:#2dcc70;
      border:1px solid var(--line);
      border-radius:10px;
      padding:10px 18px;
      font-size:10px;
      color: white;
    }
    .btn-outline-soft:hover{ background:#f8fafc; }

    .found-big-btn{
      display:inline-flex;
      margin:26px auto 0;
      background:var(--primary);
      color:#fff;
      padding:12px 60px;
      border-radius:10px;
      font-weight:600;
      font-size:12px;
      border:none;
    }
    .found-big-btn:hover{ background:var(--primary-dark); color:#fff; }

    /* ====== Adoption ====== */
    .adoption{
      padding:60px 0 65px;
      background:#fff;
    }
    .adoption .center-head{ text-align:center; margin-bottom:26px; }
    .mini-pill{
      position:absolute;
      top:12px; left:12px;
      background:rgba(99,102,241,.94);
      color:#fff;
      font-size:10px;
      font-weight:900;
      padding:5px 10px;
      border-radius:999px;
    }
    .btn-center{
      display:inline-flex;
      margin:20px auto 0;
      background:var(--primary);
      color:#fff;
      padding:12px 30px;
      border-radius:10px;
      font-weight:600;
      font-size:12px;
      border:none;
      align-items: center;
      gap: 5px;
    }
    .btn-center:hover{ background:var(--primary-dark); color:#fff; }

    /* ====== Shelters ====== */
    .shelters{
      padding:60px 0 65px;
      background:#f8fbff;
    }
    .shelter-card{
      background:#fff;
      border:1px solid rgba(2,6,23,.06);
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 10px 25px rgba(2,6,23,.06);
      height:100%;
    }
    .shelter-card .media{ height:250px; background:#e5e7eb; }
    .shelter-card img{ width:100%; height:100%; object-fit:cover; display:block; }
    .shelter-card .body{ padding:16px; }
    .shelter-card h6{ font-weight:600; margin:0 0 8px; }
    .shelter-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      color:var(--primary);
      font-size:12px;
    }
    .shelter-card .location {
      font-size: 12px;
      color: var(--primary);
    }

    /* ====== How Woofio Works (3 feature cards) ====== */
    .works{
      padding:55px 0 40px;
      background:#fff;
    }
    .work-box{
      background:#fff;
      border:1px solid rgba(2,6,23,.08);
      border-radius:16px;
      padding:40px;
      box-shadow:0 10px 25px rgba(2,6,23,.06);
      height:100%;
      text-align:center;
    }
    .work-ic{
      width:46px;height:46px;border-radius:999px;
      background:#eaf7ff;
      border:1px solid rgba(20,184,255,.25);
      display:inline-flex;align-items:center;justify-content:center;
      margin-bottom:10px;
    }
    .work-ic svg{ width:25px;height:25px;color:white; }
    .work-box h6{ font-weight:600; margin:0 0 6px; }
    .work-box p{ margin:0; font-size:13px; color:var(--muted); }

    /* Footer */
    footer{ border-top:1px solid rgba(2,6,23,.06); }
    .footer-top{
        position:relative;
        overflow:hidden;
        padding:42px 0;
    }
    .footer-wave{
        position:absolute;
        left:-90px;
        top:-120px;
        width:560px;
        height:520px;
        background:var(--primary);
        border-radius:150px;
        transform:rotate(-67deg);
    }
    .footer-brand{
        position:relative;
        z-index:2;
        color:#fff;
        padding:10px 50px;
    }
    .footer-brand img{ height:60px; }
    .footer-text{
        max-width:320px;
        font-size:16px;
        opacity:.92;
        margin-top:12px;
        margin-bottom:0;
    }
    .footer-social{
        display:flex;
        gap:10px;
        margin-top:14px;
    }
    .footer-social a{ color:#fff; }
    .footer-social svg{ width:22px; height:22px; }

    .footer-links h6 {
        font-weight:600;
        margin-bottom:10px;
        font-size:20px;
    }
    .footer-links a{
      display: block;
      color: #000000;
      font-size: 14px;
      padding: 5px 0;
      font-weight: 600;
    }
    .footer-bottom{
        background:var(--primary);
        color:#fff;
        font-size:14px;
        padding:10px 0;
        text-align:center;
    }

    /* ====== Responsive ====== */
    @media (max-width: 991px){
      .navbar-nav{ gap:10px; padding-top:10px; }
      .btn-start{ width:100%; margin-top:8px; }

      .hero{ padding:55px 0 40px; }
      .hero h1{ font-size:36px; }
      .hero-art{ min-height:200px; }
      .hero-blob{ width:290px; height:220px; right:10px; }
      .hero-blob.b{ top:58px; }

      .checklist{ grid-template-columns:1fr; }
      .protect-card{ margin:18px 0 0; max-width:100%; }
      .pro-card{
        max-width:100%;
        margin-left:0;
      }

      .hero-img {
        position: relative;
        z-index: 2;
        width: min(520px, 100%);
        border-radius: 16px;
        border: 5px solid #fff;
      }

      .footer-top {
        display: none;
      }

      .footer-wave {
        display: none;
      }
      .footer-brand {
        background-color: var(--primary);
        padding: 30px 50px;
      }

      .footer-social a {
        color: #fff;
        background-color: #34c7fd;
        padding: 10px;
        border-radius: 999px;
        width: 45px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

    }

    @media (max-width: 575px){
      .hero h1{ font-size:30px; }
      .hero-blob{ width:290px; height:220px; }

      .section-head{ flex-direction:column; align-items:flex-start; }
      /* .pet-card .media{ height:210px; } */

      .pro-card{ padding:32px 18px 18px; }
    }