:root{
      --teal:#16b6b0;
      --nav:#2a3472;
      --heroLeft:#2c3677;
      --heroRight:#4a4a86;
      --accent:#1fd4c6;
      --btn:#d5852f;
      --container: 1200px;
    }

    *{margin:0;padding:0;box-sizing:border-box}
    body{font-family:"Poppins",sans-serif;background:#0d1430;color:#fff}
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    ul{list-style:none}

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

    /* ================= TOP BAR ================= */
    .topbar{
      background:var(--teal);
      font-size:13px;
      color:#eaffff;
    }
    .topbar .row{
      height:44px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .topbar .left, .topbar .right{
      display:flex;
      align-items:center;
      gap:22px;
      flex-wrap:wrap;
    }
    .tb-item{
      display:flex;
      align-items:center;
      gap:10px;
      white-space:nowrap;
      opacity:.95;
    }
    .tb-item img{
      width:14px;height:14px;object-fit:contain;
      filter:brightness(1000%);
      opacity:.95;
    }
    .social{
      display:flex;
      align-items:center;
      gap:16px;
    }
    .social a{
      display:flex;
      align-items:center;
      gap:8px;
      opacity:.95;
    }
    .social a:hover{opacity:1}
    .social img{
      width:14px;height:14px;object-fit:contain;
      filter:brightness(1000%);
    }

    /* ================= NAVBAR ================= */
    header.navbar{
      background:var(--nav);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .navbar .row{
      height:80px;
      display:flex;
      align-items:center;
      gap:18px;
    }

    .brand{
      display:flex;
      align-items:center;
      background:#fff;
      padding:20px 18px;
      border-radius:2px;
      min-width:190px;
      gap:14px;
    }
    .brand img{height:42px;width:auto}
    /* logo already includes text "Jurea LLP", so no extra text needed */
    .navlinks{
      margin:0 auto;
      display:flex;
      align-items:center;
      gap:34px;
      font-size:13px;
      font-weight:500;
    }
    .navlinks a{opacity:.92}
    .navlinks a.active{color:var(--accent);opacity:1}

    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--btn);
      color:#fff;
      border:0;
      padding:12px 16px 12px 18px;
      border-radius:10px;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
      box-shadow:0 12px 26px rgba(0,0,0,.25);
      white-space:nowrap;
    }
    .btn .btn-arrow{
      width:34px;height:34px;
      background:#fff;
      border-radius:10px;
      display:grid;
      place-items:center;
    }
    .btn .btn-arrow img{
      width:16px;height:16px;object-fit:contain;
    }

    /* ================= HERO ================= */
    .hero{
      position:relative;
      background:
        radial-gradient(700px 420px at 75% 40%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(90deg, var(--heroLeft) 0%, #343f7b 45%, var(--heroRight) 100%);
      padding:64px 0 70px;
      overflow:hidden;
    }

    /* pink mask on right (your banner-mask.png) */
    .hero::after{
      content:"";
      position:absolute;
      right:-120px;
      top:-40px;
      width:780px;
      height:780px;
      background:url("../website-images/banner-mask.png") no-repeat center/contain;
      opacity:.95;
      pointer-events:none;
    }

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

    /* LEFT */
    .hero h1{
      font-size:66px;
      line-height:1.05;
      font-weight:600;
      letter-spacing:-.6px;
      margin-bottom:18px;
    }
    .hero .accent{color:var(--accent)}
    .hero p{
      max-width:560px;
      font-size:14px;
      line-height:1.65;
      color:rgba(255,255,255,.75);
      margin-bottom:26px;
    }

    .points{
      display:flex;
      flex-direction:column;
      gap:14px;
      margin:10px 0 26px;
    }
    .point{
      display:flex;
      align-items:center;
      gap:12px;
      font-size:14px;
      color:rgba(255,255,255,.9);
    }
    .point .chev{
      width:18px;height:18px;
      display:grid;
      place-items:center;
      color:var(--accent);
      font-size:24px;
      line-height:1;
      transform:translateY(-1px);
    }

    /* RIGHT */
    .hero-right{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:18px;
    }

    .mockup-wrap{
      position:relative;
      width:520px;
      max-width:100%;
      margin-top:10px;
    }
    .mockup{
      width:100%;
      filter:drop-shadow(0 28px 30px rgba(0,0,0,.35));
    }

    /* the small cursor triangle on mockup */
    .cursor{
      position:absolute;
      right:30px;
      top:185px;
      width:28px;
      filter:drop-shadow(0 14px 14px rgba(0,0,0,.35));
      opacity:.95;
    }

    /* slider dots + arrows */
    .slider-ui{
      display:flex;
      align-items:center;
      gap:14px;
      opacity:.95;
    }
    .slider-arrow{
      width:34px;height:34px;
      display:grid;
      place-items:center;
      border-radius:10px;
      border:2px solid rgba(31,212,198,.55);
      cursor:pointer;
    }
    .slider-arrow img{
      width:16px;height:16px;
      object-fit:contain;
      filter:brightness(1000%);
      opacity:.9;
    }
    .dots{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .dot{
      width:26px;height:4px;
      border-radius:99px;
      background:rgba(255,255,255,.25);
    }
    .dot.active{background:var(--accent)}

    /* work card bottom right */
    .work-card{
      width:520px;
      max-width:100%;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:18px;
      align-items:center;
      margin-top:8px;
    }

    .thumb{
      height:120px;
      border-radius:8px;
      overflow:hidden;
      background:
        radial-gradient(circle at 35% 40%, rgba(255,255,255,.18), transparent 45%),
        linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
      box-shadow:0 18px 26px rgba(0,0,0,.25);
      position:relative;
    }
    .play{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
    }
    .play .ring{
      width:54px;height:54px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.85);
      display:grid;
      place-items:center;
      box-shadow:0 12px 22px rgba(0,0,0,.35);
    }
    .play .triangle{
      width:0;height:0;
      border-left:10px solid #fff;
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
      margin-left:3px;
    }

    .work-text .small{
      font-size:12px;
      font-weight:700;
      letter-spacing:.12em;
      color:rgba(255,255,255,.7);
      margin-bottom:6px;
    }
    .work-text .title{
      font-size:28px;
      font-weight:800;
      line-height:1.05;
    }
    .work-text .minute{
      margin-top:8px;
      font-size:11px;
      letter-spacing:.18em;
      color:rgba(255,255,255,.55);
    }
    /* ===== Section base (same container as previous) ===== */
  .case-studies{
    background:#2a3570; /* deep navy like screenshot */
    padding:68px 0 78px;
    color:#fff;
  }
  .case-studies .container{
    width:min(1100px, calc(100% - 40px));
    margin:0 auto;
  }

  /* ===== Heading ===== */
  .cs-head{
    text-align:center;
    margin-bottom:34px;
  }
  .cs-kicker{
    font-size:10px;
    letter-spacing:.18em;
    opacity:.85;
    font-weight:600;
    margin-bottom:6px;
  }
  .cs-head h2{
    font-size:28px;
    line-height:1.1;
    font-weight:800;
    margin-bottom:10px;
  }
  .cs-head p{
    font-size:12px;
    line-height:1.55;
    opacity:.72;
    max-width:560px;
    margin:0 auto 18px;
  }

  /* ===== Tabs ===== */
  .cs-tabs{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
  }
  .cs-tab{
    width:96px;
    height:90px;
    border-radius:2px;
    border:1px solid rgba(255,255,255,.14);
    background:transparent;
    color:rgba(255,255,255,.75);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
  }
  .cs-tab img{
    object-fit:contain;
    filter:brightness(1000%);
    opacity:.9;
  }
  .cs-tab span{
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
  }
  .cs-tab.active{
    background:#fff;
    color:#1f2d5d;
    border-color:transparent;
  }
  .cs-tab.active img{
    filter:none;
    opacity:1;
  }

  /* ===== List layout ===== */
  .cs-list{
    display:flex;
    flex-direction:column;
    gap:26px;
    margin-top:26px;
  }
  .cs-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:26px;
    align-items:center;
  }
  .cs-row.reverse .cs-media{order:2}
  .cs-row.reverse .cs-content{order:1}

  /* Media cards */
  .cs-media{
    border-radius:6px;
    overflow:hidden;
    min-height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .cs-media::before{
    content:"";
    position:absolute; inset:0;
    opacity:.88;
    background:linear-gradient(120deg, rgba(0,0,0,.10), rgba(0,0,0,.08));
    pointer-events:none;
  }


  .cs-shot{
    position:relative;
    z-index:1;
    width:88%;
    max-width:420px;
    filter:drop-shadow(0 18px 22px rgba(0,0,0,.30));
  }


  /* Text block */
  .cs-content h3{
    font-size:14px;
    font-weight:700;
    color:#30d2c5;
    margin-bottom:10px;
  }
  .cs-content p{
    font-size:11px;
    line-height:1.65;
    opacity:.72;
    margin-bottom:10px;
  }
  .cs-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    opacity:.9;
    margin-top:2px;
  }
  .cs-link span{
    font-size:16px;
    transform:translateY(-1px);
  }

  /* bottom center link */
  .cs-more{
    text-align:center;
    margin-top:26px;
  }
  .cs-more a{
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    opacity:.85;
  }
  .cs-more a span{font-size:16px; margin-left:6px; transform:translateY(-1px); display:inline-block;}

    /* same container width used earlier */
  .container{
    width:min(1200px, calc(100% - 40px));
    margin:0 auto;
  }

  /* ===== Section ===== */
  .req-sec{
    position:relative;
    background:#0c1230;
    padding:78px 0 130px;
    /* overflow:hidden; */
  }

  /* blue glow circle */
  .req-sec::before{
    content:"";
    position:absolute;
    left:70px;
    top:110px;
    width:240px;
    height:340px;
    background:url("../website-images/Request-blur.png") no-repeat center/contain;
    opacity:.95;
    pointer-events:none;
  }

  .req-wrap{
    position:relative;
    display:grid;
    grid-template-columns: 1.2fr .9fr;
    gap:42px;
    align-items:start;
    z-index:2;
  }

  /* ===== Left text ===== */
  .req-left h2{
    font-size:34px;
    line-height:1.15;
    font-weight:800;
    color:#fff;
    margin-bottom:14px;
  }

  .req-sub{
    max-width:520px;
    font-size:11px;
    line-height:1.6;
    color:rgba(255,255,255,.65);
    margin-bottom:22px;
  }

  .req-item h4{
    color:#24d2c6;
    font-size:14px;
    font-weight:700;
    margin-bottom:10px;
  }

  .req-item p{
    font-size:11px;
    line-height:1.65;
    color:rgba(255,255,255,.68);
    margin-bottom:10px;
    max-width:520px;
  }

  .req-link{
    display:block;
    margin-top:18px;
    font-size:14px;
    font-weight:700;
    color:#24d2c6;
  }

  /* ===== Right card ===== */
  .req-card{
    background:#fff;
    border-radius:4px;
    box-shadow:0 22px 40px rgba(0,0,0,.35);
    width:min(420px, 100%);
    justify-self:end;
  }
  .req-card-inner{
    padding:22px 22px 24px;
  }
  .req-title{
    font-size:12px;
    font-weight:800;
    color:#20b7ff;
    margin-bottom:10px;
  }
  .req-head{
    font-size:14px;
    font-weight:700;
    color:#1b2b5b;
    line-height:1.25;
    margin-bottom:14px;
  }

  .req-form{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .req-form input,
  .req-form textarea{
    width:100%;
    border:1px solid #e6e8ef;
    outline:none;
    padding:10px 10px;
    font-size:11px;
    border-radius:2px;
    font-family:inherit;
  }
  .req-form textarea{resize:none; padding:10px}

  .req-btn{
    margin-top:8px;
    width:120px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:#2a3570;
    color:#fff;
    border:0;
    padding:8px 10px 8px 14px;
    border-radius:12px;
    font-weight:700;
    font-size:11px;
    cursor:pointer;
  }
  .req-btn-ico{
    width:26px;
    height:26px;
    border-radius:8px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
  }
  .req-btn-ico img{
    width:20px;
    height:20px;
    object-fit:contain;
    
  }

  /* bottom frames */
.req-frames{
  position:absolute;
  left:50%;
  bottom: -320px;             /* ⬅️ move DOWN (increase value if needed) */
  transform:translateX(-50%);
  width:min(980px, 92%);
  pointer-events:none;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.30));
}
.req-sec{
  position:relative;
  background:#0c1230;
  padding:78px 0 190px;   /* ⬅️ increased bottom padding */
  /* overflow:hidden; */
}
  .container{
    width:min(1200px, calc(100% - 40px));
    margin:0 auto;
  }

  /* ===== Section background ===== */
  .process-sec{
    position:relative;
    padding:170px 0 0px;
    color:#fff;
    overflow:hidden;
    /* background: linear-gradient(90deg, #06264b 0%, #053c66 35%, #4d1c78 100%); */
  }

  /* glow blobs */
  .proc-glow{
    position:absolute;
    pointer-events:none;
    opacity:.95;
    z-index:0;
  }
  .proc-glow-left{
    left:-140px;
    top:170px;
    /* width:520px; */
  }
  .proc-glow-right{
    right:-180px;
    top:175px;
    
  }

  /* ===== Heading ===== */
  .process-head{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:34px;
    margin-top: 6rem;
  }
  .process-head h2{
    font-size:28px;
    font-weight:800;
    margin-bottom:10px;
  }
  .process-head p{
    font-size:12px;
    line-height:1.55;
    color:rgba(255,255,255,.75);
    max-width:720px;
    margin:0 auto;
  }
  .process-head p span{
    color:#17d2c7;
  }

  /* ===== Icons row ===== */
  .process-icons{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items:center;
    margin-top:20px;
  }
  .p-ico{
    width:120px;
    /* justify-self:center; */
    filter: drop-shadow(0 18px 22px rgba(0,0,0,.22));
  }
  .p1{justify-self:start}
  /* .p3{justify-self:end} */

  /* ===== Line ===== */
  .process-line{
    position:relative;
    z-index:2;
    margin:18px 0 26px;
    display:flex;
    justify-content:center;
  }
  .process-line img{
    width:min(900px, 100%);
    opacity:.95;
  }
  .dot{
    position:absolute;
    top:50%;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#18d2c8;
    box-shadow:0 0 18px rgba(24,210,200,.8);
    transform:translateY(-50%);
  }
  .dot-left{ left:calc(50% - 410px); }
  .dot-mid { left:50%; }

  /* ===== 3 columns ===== */
  .process-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:34px;
    margin-top:4px;
  }

  .p-card h3{
    font-size:15px;
    font-weight:800;
    color:#17d2c7;
    margin-bottom:10px;
  }

  .p-card p{
    font-size:11px;
    line-height:1.7;
    color:rgba(255,255,255,.74);
    margin-bottom:10px;
  }

  .p-mini{
    margin-top:6px;
    font-size:11px;
    color:rgba(255,255,255,.75);
    font-weight:600;
    margin-bottom:8px;
  }

  .p-card ul{
    margin-top:6px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .p-card li{
    position:relative;
    padding-left:16px;
    font-size:11px;
    line-height:1.55;
    color:rgba(255,255,255,.78);
  }
  .p-card li::before{
    content:"›";
    position:absolute;
    left:0;
    top:-1px;
    color:#17d2c7;
    font-size:16px;
    font-weight:700;
  }

  /* big numbers */
  .p-num{
    margin-top:24px;
  }
  .p-num img{
    width:140px;
  }
    .faq-sec{
    background: radial-gradient(1000px 520px at 50% 30%, rgba(255,255,255,.06), transparent 55%),
                linear-gradient(180deg, #08153a 0%, #060f2a 100%);
    padding: 78px 0 86px;
    color:#fff;
  }
  .faq-sec .container{
    width:min(1100px, calc(100% - 40px));
    margin:0 auto;
  }

  .faq-title{
    text-align:center;
    font-size:32px;
    font-weight:600;
    letter-spacing:.2px;
    margin-bottom:28px;
  }

  .faq-list{
    width:min(860px, 100%);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .faq-item{
    border:none;
    background:transparent;
  }

  /* summary row */
  .faq-q{
    list-style:none;
    display:grid;
    grid-template-columns: 56px 1fr 40px;
    align-items:center;
    gap:12px;
    padding: 12px 6px;
    cursor:pointer;
  }
  .faq-q::-webkit-details-marker{display:none;}

  .faq-num{
    font-weight:800;
    color:#1fd4c6;
    font-size:18px;
    letter-spacing:.02em;
    text-align:right;
    padding-right:6px;
  }

  .faq-text{
    font-size:20px;
    font-weight:700;
    color:#fff;
    line-height:1.25;
  }

  /* chevron icon (CSS only) */
  .faq-ico{
    width:28px;height:28px;
    justify-self:end;
    position:relative;
  }
  .faq-ico::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:10px;height:10px;
    border-right:2px solid #1fd4c6;
    border-bottom:2px solid #1fd4c6;
    transform:translate(-50%,-60%) rotate(45deg);
    transition:transform .2s ease;
  }

  /* answer */
  .faq-a{
    margin-left:68px; /* aligns under text after number */
    margin-top:6px;
    padding: 0 0 14px;
    color:rgba(255,255,255,.72);
    font-size:13px;
    line-height:1.7;
  }

  /* open state */
  .faq-item[open] .faq-ico::before{
    transform:translate(-50%,-40%) rotate(225deg);
  }

  /* subtle hover */
  .faq-q:hover .faq-text{opacity:.95}

  .site-footer{
  position: relative;
  background:#2A3276;
  color:#fff;
  padding: 0 0 22px;
  overflow:hidden;
  font-family: Inter, system-ui, Arial, sans-serif;
}

/* Decorative shapes (very light) */
.f-shape{
  position:absolute;
  opacity:.15;
  pointer-events:none;
  user-select:none;
}
.f-shape--t1{ left: 35px; top: 30px; width: 38px; }
.f-shape--t2{ left: 75px; top: 58px; width: 26px; }
.f-shape--t3{ right: 55px; top: 55px; width: 36px; }
.f-shape--t4{ right: 30px; top: 35px; width: 24px; }

.footer-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Top row */
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Big logo box (white) */
.footer-logoBox{
  width: 250px;
  height: 90px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-logoBox img{
  height: 54px;
  width:auto;
  display:block;
}

/* Socials on right */
.footer-social{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-social__label{
  font-size:13px;
  color:rgba(255,255,255,.9);
  margin-right:8px;
}
.footer-social__icon{
  width:28px;
  height:28px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  display:grid;
  place-items:center;
}
.footer-social__icon img{
  width:14px;
  height:14px;
  object-fit:contain;
  display:block;
  filter: brightness(0) invert(1);
}

/* Divider lines */
.footer-divider{
 
  background: rgba(255,255,255,.10);
  margin: 18px 0 0;
}
.footer-divider--bottom{
  margin: 40px 0 14px;
}

/* Grid columns */
.footer-grid{
  display:grid;
  grid-template-columns: 140px 140px 170px 260px 1fr;
  gap: 20px;
  padding-top: 26px;
  align-items:start;
}

.footer-title{
  font-size:14px;
  font-weight:700;
  margin-bottom: 12px;
  color:#fff;
}

.footer-list{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-list li{
  margin: 10px 0;
}
.footer-list a{
  color: rgba(255,255,255,.75);
  font-size:12px;
  text-decoration:none;
}
.footer-list a:hover{
  color:#fff;
}

/* Contact */
.footer-contact{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.footer-contact__row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.footer-contact__icon{
  width: 28px;
  height: 28px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  flex: 0 0 28px;
}
.footer-contact__icon img{
  width:14px;
  height:14px;
  object-fit:contain;
  display:block;
  filter: brightness(0) invert(1);
}
.footer-contact__text{
  font-size:12px;
  line-height:1.5;
  color: rgba(255,255,255,.75);
  margin-top: 2px;
}

/* Subscribe */
.footer-subtext{
  font-size:12px;
  line-height:1.5;
  color: rgba(255,255,255,.75);
  margin-bottom: 14px;
}

.footer-form{
  display:flex;
  align-items:center;
  width: 250px;
  height: 36px;
  background:#fff;
  border-radius:4px;
  overflow:hidden;
}

.footer-input{
  border:none;
  outline:none;
  padding: 0 12px;
  height: 100%;
  width: 100%;
  font-size:12px;
  color:#333;
}
.footer-input::placeholder{
  color:#8a8a8a;
}

.footer-btn{
  width: 42px;
  height: 100%;
  border:none;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.footer-btn img{
  width: 40px;
  height: 40px;
  object-fit:contain;
  display:block;
}

/* Bottom copyright */
.footer-copy{
  text-align:center;
  font-size:12px;
  color: rgba(255,255,255,.75);
  padding-bottom: 10px;
}
  .newsletter{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    color:#fff;
    background: linear-gradient(90deg, #07305a 0%, #0b2f57 25%, #3a1767 60%, #070d25 100%);
  }

  .newsletter .container{
    width:min(1200px, calc(100% - 40px));
    margin:0 auto;
  }

  /* blue glow */
  .news-glow{
    position:absolute;
    left:-120px;
    top:-90px;
    width:520px;
    opacity:.95;
    pointer-events:none;
    z-index:0;
  }

  .news-wrap{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
  }

  .news-left h2{
    font-size:34px;
    line-height:1.1;
    font-weight:800;
    margin-bottom:10px;
  }
  .news-left p{
    font-size:13px;
    line-height:1.6;
    color:rgba(255,255,255,.75);
    max-width:520px;
  }

  /* form */
  .news-form{
    display:flex;
    align-items:stretch;
    width:min(540px, 100%);
    border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.05);
  }
  .news-form input{
    flex:1;
    border:0;
    outline:none;
    background:transparent;
    color:#fff;
    padding:16px 18px;
    font-size:12px;
  }
  .news-form input::placeholder{
    color:rgba(255,255,255,.70);
  }
  .news-form button{
    width:150px;
    border:0;
    cursor:pointer;
    font-weight:800;
    letter-spacing:.06em;
    color:#fff;
    background: linear-gradient(180deg, #12b8ff 0%, #0aa4f0 100%);
    box-shadow:0 14px 22px rgba(0,0,0,.25);
  }

  /* responsive */
  @media (max-width: 900px){
    .news-wrap{
      flex-direction:column;
      align-items:flex-start;
    }
    .news-form{width:100%}
    .news-left h2{font-size:28px}
  }

/* Responsive */
@media (max-width: 1050px){
  .footer-logoBox{ width: 360px; }
  .footer-grid{ grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer-col--subscribe .footer-form{ width: 100%; max-width: 280px; }
}
@media (max-width: 620px){
  .footer-wrap{ padding: 0 18px; }
  .footer-top{ flex-direction:column; align-items:flex-start; gap: 14px; }
  .footer-logoBox{ width: 100%; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-form{ width: 100%; max-width: 320px; }
}

  @media (max-width: 760px){
    .faq-title{font-size:26px}
    .faq-q{grid-template-columns: 48px 1fr 34px}
    .faq-num{font-size:16px}
    .faq-text{font-size:16px}
    .faq-a{margin-left:58px}
  }

  /* ===== Responsive ===== */
  @media (max-width: 980px){
    .process-grid{grid-template-columns:1fr; gap:26px}
    .process-icons{grid-template-columns:1fr; gap:18px}
    .p1,.p3{justify-self:center}
    .dot-left,.dot-mid{display:none}
    .p-num{opacity:.10}
  }

  /* ===== Responsive ===== */
  @media (max-width: 980px){
    .req-wrap{
      grid-template-columns:1fr;
      gap:26px;
    }
    .req-card{justify-self:start}
    .req-sec{padding-bottom:160px}
    .req-sec::before{left:-40px; top:70px; opacity:.8}
  }

  /* Responsive */
  @media (max-width: 900px){
    .cs-row{grid-template-columns:1fr}
    .cs-row.reverse .cs-media{order:1}
    .cs-row.reverse .cs-content{order:2}
    .cs-media{min-height:190px}
  }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 980px){
      .navlinks{display:none}
      .brand{min-width:auto}
      .hero-grid{grid-template-columns:1fr; min-height:auto}
      .hero h1{font-size:48px}
      .work-card{grid-template-columns:1fr}
      .cursor{right:16px; top:160px}
    }
    @media (max-width: 520px){
      .topbar .row{height:auto;padding:10px 0}
      .hero{padding:44px 0 54px}
      .hero h1{font-size:38px}
      .btn{width:100%;justify-content:space-between}
      .hero::after{right:-220px; top:-120px; width:700px; height:700px; opacity:.85}
    }