:root{
      --primary:#155EEF;
      --primary-dark:#004EEB;
      --primary-soft:#EEF4FF;
      --dark:#0F172A;
      --text:#182230;
      --muted:#667085;
      --light:#F8FAFC;
      --white:#FFFFFF;
      --border:#E4E7EC;
      --border-soft:#EEF2F6;
      --success:#16A34A;
      --warning-bg:#FFF7E6;
      --warning-text:#B54708;
      --featured-bg:#EEF8FF;
      --featured-text:#175CD3;
      --shadow-sm:0 2px 8px rgba(16,24,40,.05);
      --shadow-md:0 12px 30px rgba(16,24,40,.08);
      --shadow-lg:0 22px 60px rgba(15,23,42,.16);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --max:1380px;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
      -webkit-text-size-adjust:100%;
    }

    body{
      font-family:Inter, Arial, Helvetica, sans-serif;
      background:var(--light);
      color:var(--text);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    img{
      max-width:100%;
      display:block;
    }

    button,
    input,
    select{
      font:inherit;
    }

    .container{
      width:min(100% - 32px, var(--max));
      margin:0 auto;
    }

    .section{
      padding:84px 0;
    }

    .section-head{
      text-align:center;
      max-width:840px;
      margin:0 auto 46px;
    }

    .section-head h2{
      font-size:clamp(32px, 4vw, 54px);
      line-height:1.08;
      color:#0B1220;
      margin-bottom:14px;
      font-weight:800;
      letter-spacing:-1px;
    }

    .section-head p{
      font-size:18px;
      color:var(--muted);
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:34px;
      padding:0 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      font-size:13px;
      font-weight:700;
      color:#344054;
      margin-bottom:16px;
      box-shadow:var(--shadow-sm);
    }

    .eyebrow-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 5px rgba(22,163,74,.12);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius:999px;
      min-height:54px;
      padding:0 28px;
      font-size:16px;
      font-weight:700;
      border:1px solid transparent;
      cursor:pointer;
      transition:.22s ease;
      white-space:nowrap;
    }

    .btn:hover{
      transform:translateY(-1px);
    }

    .btn svg{
      width:18px;
      height:18px;
      flex:0 0 18px;
    }

    .btn-primary{
      background:var(--primary);
      color:#fff;
      border-color:var(--primary);
      box-shadow:0 10px 24px rgba(21,94,239,.22);
    }

    .btn-primary:hover{
      background:var(--primary-dark);
      border-color:var(--primary-dark);
    }

    .btn-outline{
      background:#fff;
      color:var(--primary);
      border-color:#C7D7FE;
    }

    .btn-outline:hover{
      background:#F7FAFF;
    }

    .btn-light{
      background:#fff;
      color:var(--dark);
      border-color:#D0D5DD;
    }

    .btn-light:hover{
      background:#F9FAFB;
    }

    .icon{
      width:18px;
      height:18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 18px;
    }

    .icon svg{
      width:100%;
      height:100%;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .topbar{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(228,231,236,.9);
    }

    .nav{
      min-height:84px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }

    .logo{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-size:29px;
      font-weight:800;
      color:#0B1220;
      letter-spacing:-.8px;
    }

    .logo-mark{
      width:40px;
      height:40px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,#0B5CFF 0%,#5B8CFF 100%);
      color:#fff;
      box-shadow:0 12px 24px rgba(11,92,255,.18);
    }

    .logo-mark svg{
      width:20px;
      height:20px;
      stroke:#fff;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .logo span{
      color:var(--primary);
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:28px;
      font-size:15px;
      font-weight:600;
      color:#344054;
    }

    .nav-links a{
      transition:.2s ease;
    }

    .nav-links a:hover{
      color:var(--primary);
    }

    .nav-actions{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .hero{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(7,20,47,.88) 0%, rgba(10,39,99,.76) 48%, rgba(21,94,239,.64) 100%),
        url('../images/hero-banner.jpg') center/cover no-repeat;
      color:#fff;
      padding:90px 0 78px;
    }

    .hero::before{
      content:"";
      position:absolute;
      right:-120px;
      bottom:-140px;
      width:420px;
      height:420px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.12), transparent 62%);
      pointer-events:none;
    }

    .hero::after{
      content:"";
      position:absolute;
      left:-140px;
      top:-140px;
      width:360px;
      height:360px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.06), transparent 64%);
      pointer-events:none;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:36px;
      align-items:center;
      position:relative;
      z-index:2;
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 16px;
      border-radius:999px;
      font-size:14px;
      font-weight:700;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.16);
      margin-bottom:18px;
      color:#F8FAFC;
    }

    .hero-badge .icon{
      color:#C7D7FE;
    }

    .hero h1{
      font-size:clamp(40px, 5vw, 68px);
      line-height:1.01;
      font-weight:800;
      margin-bottom:18px;
      letter-spacing:-1.5px;
      max-width:760px;
    }

    .hero p{
      font-size:18px;
      color:rgba(255,255,255,.86);
      max-width:690px;
      margin-bottom:30px;
    }

    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:28px;
    }

    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      color:rgba(255,255,255,.82);
      font-size:15px;
    }

    .hero-points span{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }

    .hero-points .point-icon{
      width:22px;
      height:22px;
      border-radius:50%;
      background:rgba(255,255,255,.12);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#D1E0FF;
      flex:0 0 22px;
    }

    .hero-points .point-icon svg{
      width:13px;
      height:13px;
      stroke:currentColor;
      fill:none;
      stroke-width:2.3;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .hero-card{
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.15);
      border-radius:30px;
      padding:20px;
      box-shadow:var(--shadow-lg);
    }

    .search-card{
      background:#fff;
      color:var(--text);
      border-radius:24px;
      padding:22px;
      box-shadow:0 18px 40px rgba(15,23,42,.08);
    }

    .search-card h3{
      font-size:24px;
      color:#0B1220;
      margin-bottom:14px;
      font-weight:800;
      letter-spacing:-.4px;
    }

    .search-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }

    .input,
    .select{
      width:100%;
      height:54px;
      border:1px solid var(--border);
      border-radius:14px;
      padding:0 16px;
      font-size:15px;
      color:#101828;
      outline:none;
      background:#fff;
      transition:.2s ease;
    }

    .input:focus,
    .select:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 4px rgba(21,94,239,.08);
    }

    .full{
      grid-column:1 / -1;
    }

    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:14px;
    }

    .hero-stat{
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.12);
      border-radius:20px;
      padding:18px 16px;
      text-align:center;
    }

    .hero-stat strong{
      display:block;
      font-size:25px;
      line-height:1.1;
      margin-bottom:6px;
      color:#fff;
      font-weight:800;
    }

    .hero-stat span{
      font-size:13px;
      color:rgba(255,255,255,.8);
    }

    .trust-strip{
      padding:24px 0;
      background:#fff;
      border-bottom:1px solid var(--border-soft);
    }

    .trust-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }

    .trust-item{
      background:linear-gradient(180deg,#FCFDFF 0%, #F9FBFD 100%);
      border:1px solid var(--border-soft);
      border-radius:20px;
      padding:22px 20px;
      text-align:center;
      box-shadow:var(--shadow-sm);
    }

    .trust-item strong{
      display:block;
      font-size:30px;
      color:var(--primary);
      margin-bottom:4px;
      font-weight:800;
      letter-spacing:-.5px;
    }

    .trust-item span{
      color:var(--muted);
      font-size:14px;
    }

    .listings-shell{
      max-width:1100px;
      margin:0 auto;
    }

    #listings{
      background:linear-gradient(180deg, #f4f9ff 0%, #eaf4ff 100%);
    }

    .category-pills{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      justify-content:center;
      margin-bottom:34px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:52px;
      padding:0 22px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:999px;
      font-size:16px;
      color:#0F172A;
      font-weight:600;
      transition:.2s ease;
      box-shadow:var(--shadow-sm);
    }

    .pill:hover,
    .pill.active{
      color:var(--primary);
      background:#F5F8FF;
      border-color:#D6E0FF;
    }

    .listings-wrap{
      display:grid;
      gap:24px;
    }

    .listing-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:22px;
      display:grid;
      grid-template-columns:300px 1fr 220px;
      gap:22px;
      align-items:start;
      box-shadow:var(--shadow-md);
      transition:.22s ease;
    }

    .listing-card:hover{
      transform:translateY(-2px);
      box-shadow:0 20px 42px rgba(16,24,40,.09);
    }

    .listing-media{
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .listing-image{
      height:228px;
      border:1px solid #DCE3EE;
      border-radius:20px;
      background:
        radial-gradient(circle at top left, rgba(21,94,239,.12), transparent 34%),
        linear-gradient(135deg, #F8FAFC, #EEF4FB);
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
    }

    .listing-image::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.15), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(21,94,239,.06), transparent 28%);
      pointer-events:none;
    }

    .nda-badge{
      position:relative;
      z-index:2;
      background:rgba(21,94,239,.95);
      color:#fff;
      padding:18px 22px;
      border-radius:16px;
      text-align:center;
      font-size:19px;
      line-height:1.4;
      font-weight:700;
      box-shadow:0 12px 30px rgba(21,94,239,.24);
      max-width:240px;
    }

    .card-thumb-label{
      position:absolute;
      left:16px;
      top:16px;
      z-index:2;
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:rgba(255,255,255,.94);
      border:1px solid #E4E7EC;
      color:#344054;
      font-size:13px;
      font-weight:700;
      border-radius:999px;
      padding:8px 12px;
      box-shadow:var(--shadow-sm);
    }

    .card-thumb-label .mini-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--primary);
    }

    .listing-tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:8px 14px;
      font-size:14px;
      font-weight:700;
      width:max-content;
    }

    .listing-tag svg{
      width:14px;
      height:14px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .listing-tag.sponsored{
      background:var(--warning-bg);
      color:var(--warning-text);
    }

    .listing-tag.featured{
      background:var(--featured-bg);
      color:var(--featured-text);
    }

    .listing-body{
      padding-top:2px;
    }

    .listing-title{
      display:inline-block;
      font-size:28px;
      line-height:1.22;
      color:#101828;
      font-weight:800;
      margin-bottom:12px;
      letter-spacing:-.6px;
    }

    .listing-title:hover{
      color:var(--primary);
    }

    .location{
      display:flex;
      align-items:center;
      gap:9px;
      font-size:15px;
      color:#475467;
      margin-bottom:16px;
      font-weight:600;
    }

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

    .description{
      font-size:17px;
      line-height:1.7;
      color:#344054;
      margin-bottom:20px;
      max-width:820px;
    }

    .meta-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(120px,1fr));
      gap:14px;
    }

    .meta-item{
      background:#FAFBFC;
      border:1px solid var(--border-soft);
      border-radius:16px;
      padding:14px;
    }

    .meta-item .label{
      font-size:13px;
      color:#667085;
      margin-bottom:5px;
      font-weight:600;
    }

    .meta-item .value{
      font-size:16px;
      font-weight:700;
      color:#101828;
      line-height:1.35;
    }

    .listing-side{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      justify-content:space-between;
      min-height:100%;
      padding-top:2px;
    }

    .price-box{
      text-align:right;
      margin-bottom:42px;
      padding:18px 18px 16px;
      border:1px solid var(--border-soft);
      background:#FCFCFD;
      border-radius:18px;
      width:100%;
    }

    .price-label{
      font-size:14px;
      color:#667085;
      margin-bottom:6px;
      font-weight:600;
    }

    .price-value{
      font-size:30px;
      font-weight:800;
      color:#101828;
      line-height:1.1;
      letter-spacing:-.7px;
    }

    .side-actions{
      width:100%;
      display:flex;
      justify-content:flex-end;
      gap:12px;
      margin-top:auto;
      flex-wrap:wrap;
    }

    .side-actions .btn{
      flex:1;
      min-width:0;
    }

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
    }

    .feature-card{
      background:#fff;
      border:1px solid var(--border-soft);
      border-radius:24px;
      padding:28px 24px;
      box-shadow:var(--shadow-md);
    }

    .feature-icon{
      width:60px;
      height:60px;
      border-radius:18px;
      background:#EEF4FF;
      color:var(--primary);
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:16px;
    }

    .feature-icon svg{
      width:28px;
      height:28px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .feature-card h3{
      font-size:23px;
      margin-bottom:10px;
      color:#0B1220;
      letter-spacing:-.4px;
    }

    .feature-card p{
      color:var(--muted);
      font-size:16px;
    }

    .process{
      background:#fff;
    }

    .process-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
    }

    .process-card{
      background:linear-gradient(180deg,#FBFCFF 0%,#F8FAFC 100%);
      border:1px solid var(--border-soft);
      border-radius:24px;
      padding:28px 24px;
      box-shadow:var(--shadow-sm);
    }

    .step{
      width:50px;
      height:50px;
      border-radius:50%;
      background:linear-gradient(135deg,#155EEF 0%,#4F8BFF 100%);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:19px;
      font-weight:800;
      margin-bottom:16px;
      box-shadow:0 12px 24px rgba(21,94,239,.18);
    }

    .process-card h3{
      font-size:22px;
      color:#0B1220;
      margin-bottom:10px;
      letter-spacing:-.4px;
    }

    .process-card p{
      color:var(--muted);
    }

    .testimonials-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:24px;
      align-items:stretch;
    }

    .testimonial{
      background:#fff;
      border:1px solid var(--border-soft);
      border-radius:24px;
      padding:28px;
      box-shadow:var(--shadow-md);
      display:flex;
      flex-direction:column;
      min-height:100%;
    }

    .stars{
      color:#F59E0B;
      margin-bottom:18px;
      display:flex;
      align-items:center;
      gap:6px;
    }

    .stars svg{
      width:18px;
      height:18px;
      fill:currentColor;
      stroke:none;
      flex:0 0 18px;
    }

    .testimonial p{
      color:#475467;
      margin-bottom:24px;
      font-size:17px;
      line-height:1.75;
      flex:1;
    }

    .author{
      display:flex;
      align-items:center;
      gap:14px;
      margin-top:auto;
    }

    .avatar{
      width:50px;
      height:50px;
      border-radius:50%;
      background:#DBEAFE;
      color:#1D4ED8;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:16px;
      border:1px solid #BFDBFE;
      flex:0 0 50px;
    }

    .author h5{
      font-size:16px;
      color:#0B1220;
      margin-bottom:3px;
      line-height:1.2;
    }

    .author span{
      color:var(--muted);
      font-size:13px;
      display:block;
    }

    .cta-box{
      background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 25%),
        linear-gradient(135deg,#08142F 0%, #155EEF 100%);
      color:#fff;
      border-radius:32px;
      padding:62px 34px;
      text-align:center;
      box-shadow:0 24px 60px rgba(21,94,239,.20);
    }

    .cta-box h2{
      font-size:clamp(32px, 4vw, 50px);
      line-height:1.08;
      margin-bottom:14px;
      font-weight:800;
      letter-spacing:-1px;
    }

    .cta-box p{
      max-width:760px;
      margin:0 auto 24px;
      color:rgba(255,255,255,.86);
      font-size:18px;
    }

    .cta-actions{
      display:flex;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
    }

    .cta-box .btn-outline{
      background:transparent;
      color:#fff;
      border-color:rgba(255,255,255,.34);
    }

    .cta-box .btn-outline:hover{
      background:rgba(255,255,255,.08);
    }

    footer{
      background:#0A1020;
      color:#C3CEDD;
      padding:64px 0 22px;
      margin-top:82px;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:2fr 1fr 1fr 1fr;
      gap:28px;
      margin-bottom:34px;
    }

    .footer-brand p{
      color:#97A3B7;
      max-width:430px;
      margin-top:14px;
      font-size:15px;
    }

    .footer-col h4{
      color:#fff;
      font-size:17px;
      margin-bottom:14px;
    }

    .footer-col a{
      display:block;
      color:#97A3B7;
      margin-bottom:10px;
      font-size:14px;
      transition:.2s ease;
    }

    .footer-col a:hover{
      color:#fff;
    }

    .copyright{
      border-top:1px solid rgba(255,255,255,.08);
      padding-top:18px;
      text-align:center;
      color:#8390A5;
      font-size:14px;
    }

    @media (max-width: 1280px){
      .listing-card{
        grid-template-columns:280px 1fr;
      }

      .listing-side{
        grid-column:1 / -1;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:20px;
      }

      .price-box{
        margin-bottom:0;
        text-align:left;
        width:auto;
        min-width:220px;
      }

      .side-actions{
        width:auto;
      }

      .side-actions .btn{
        flex:unset;
      }
    }

    @media (max-width: 1100px){
      .hero-grid,
      .feature-grid,
      .process-grid,
      .testimonials-grid,
      .footer-grid,
      .trust-grid{
        grid-template-columns:repeat(2,1fr);
      }

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

      .listings-shell{
        max-width:100%;
      }
    }

    @media (max-width: 860px){
      .nav{
        flex-wrap:wrap;
        padding:14px 0;
      }

      .nav-links{
        display:none;
      }

      .nav-actions{
        width:100%;
      }

      .nav-actions .btn{
        flex:1;
      }

      .hero{
        padding:68px 0 60px;
      }

      .search-grid,
      .trust-grid,
      .feature-grid,
      .process-grid,
      .testimonials-grid,
      .footer-grid,
      .hero-stats{
        grid-template-columns:1fr;
      }

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

      .listing-side{
        flex-direction:column;
        align-items:flex-start;
      }

      .price-box{
        text-align:left;
        width:100%;
      }

      .side-actions{
        width:100%;
        justify-content:flex-start;
      }

      .btn{
        min-width:unset;
      }

      .meta-grid{
        grid-template-columns:repeat(2,1fr);
      }

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

    @media (max-width: 560px){
      .container{
        width:min(100% - 20px, var(--max));
      }

      .section{
        padding:58px 0;
      }

      .section-head p,
      .hero p{
        font-size:16px;
      }

      .pill{
        width:100%;
      }

      .listing-title{
        font-size:24px;
      }

      .description{
        font-size:16px;
      }

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

      .side-actions{
        flex-direction:column;
      }

      .side-actions .btn,
      .nav-actions .btn{
        width:100%;
      }

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

      .hero-points{
        flex-direction:column;
        gap:10px;
      }

      .price-value{
        font-size:26px;
      }

      .logo{
        font-size:24px;
      }

      .logo-mark{
        width:36px;
        height:36px;
        border-radius:12px;
      }

      .hero-badge{
        font-size:13px;
      }

      .listing-image{
        height:210px;
      }
    }

    main{display:block;}

    .hero .search-card{
      backdrop-filter: blur(8px);
    }

    .hero::before,
    .hero::after{
      mix-blend-mode:screen;
    }