:root {
      --red: #ff1f2d;
      --red-dark: #d90d19;
      --black: #050505;
      --black-2: #525252;
      --surface: #121214;
      --surface-2: #171719;
      --white: #ffffff;
      --muted: #a7a7ad;
      --border: rgba(255,255,255,.10);
      --shadow: 0 24px 70px rgba(0,0,0,.35);
      --radius: 12px;
    }
  
@font-face {
  font-family: 'ClashDisplay-Medium';
  src: url('font/ClashDisplay-Medium.woff2') format('woff2'),
       url('font/ClashDisplay-Medium.woff') format('woff'),
       url('font/ClashDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Semibold';
  src: url('font/ClashDisplay-Semibold.woff2') form303at('woff2'),
       url('font/ClashDisplay-Semibold.woff') format('woff'),
       url('font/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
  
@font-face {
  font-family: 'ClashDisplay-Bold';
  src: url(font/ClashDisplay-Bold.woff2) format('woff2'),
       url(font/ClashDisplay-Bold.woff) format('woff'),
       url(font/ClashDisplay-Bold.ttf) format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
} 


    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Poppins", sans-serif;
      color: var(--white);
      background: var(--white);
      overflow-x: hidden;
          letter-spacing: 0.5px;
    }
     h3 {
      font-size: 1.8rem;
      font-weight: 500;
      margin-bottom: 13px;
      color: var(--white);
      font-family: 'CLASHDISPLAY-MEDIUM';
      letter-spacing: 0.5px;
      line-height: 22px;
    }

    a { text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* Helpers */
    .text-red { color: var(--red); }
    .section-space { padding: 110px 0; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--black-2);
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: .15em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .eyebrow::before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--red);
      border-radius: 99px;
      display: none;
    }
    .section-title {
      font-size: clamp(2.2rem, 5vw, 3.3rem);
      font-weight: 700;
      letter-spacing: 0em;
      line-height: .98;
      margin-bottom: 22px;
      text-transform: capitalize;
      color: var(--black);
      font-family: 'ClashDisplay-Semibold';
    }
    .section-copy {
      color: var(--black);
      font-size: 0.9rem;
    font-weight:300;
    line-height: 1.4;
    max-width: 720px;
    }

    /* Navbar */
    .navbar {
      padding: 22px 0;
      transition: .3s ease;
    }
    .navbar.scrolled {
      padding: 13px 0;
      background: rgba(5,5,5,.9);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    .brand {
      color: var(--white);
      font-size: 1.35rem;
      /* font-weight: 900; */
      letter-spacing: 1px;
      font-family: 'ClashDisplay-Medium';
      text-transform: uppercase;
    }
    .brand span { color: var(--red); font-family: 'ClashDisplay-Medium'; }
    .navbar .nav-link {
      color: #d4d4d7;
      font-weight: 300;
      font-size: .92rem;
      margin: 0 6px;
      transition: .25s;
    }
    .navbar .nav-link:hover,
    .navbar .nav-link.active { color: var(--white); }
    .btn-red {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: var(--white);
      background: var(--red);
      border: 1px solid var(--red);
      padding: 13px 20px;
      border-radius: 12px;
      font-weight: 500;
      transition: .25s ease;
      box-shadow: 0 10px 30px rgba(255,31,45,.20);
    }
    .btn-red:hover {
      color: var(--white);
      background: #ff3341;
      transform: translateY(-2px);
      box-shadow: 0 15px 35px rgba(255,31,45,.28);
    }
    .btn-outline-light {
      border-radius: 12px;
      padding: 13px 20px;
      font-weight: 500;
    }


    .videoban {
        width:100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0px;
    }
    .videoban video{
        width:100%;
        height: 100%;
        object-fit: cover;
    object-position: center center;
    }
    .videoban::after {
        width:100%;
        height: 100%;
        background-color: #00000098;
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0px;
    }
    
    /* Hero */
    .hero {
      position: relative;
      min-height: 860px;
      display: flex;
      align-items: center;
      padding: 150px 0 110px;
      background:
        radial-gradient(circle at 82% 18%, rgba(255,31,45,.24), transparent 26%),
        radial-gradient(circle at 15% 70%, rgba(255,31,45,.09), transparent 24%),
        linear-gradient(180deg, #080809 0%, #050505 100%);

        
      
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--red), transparent);
      opacity: .7;
    }
    .hero-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .25;
      /* background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 70px 70px;
      mask-image: linear-gradient(to bottom, black, transparent 90%); */
      /* background: url(img/banner.jpg) no-repeat right top; */
      background-size: 80%;
    }
    .hero-title {
      font-size: clamp(2rem, 5vw, 5.5rem);
      line-height: .89;
      letter-spacing: 0em;
      font-weight: 900;
      margin: 0 0 28px;
      /* max-width: 950px; */
      /* font-family: 'ClashDisplay-Bold'; */
      font-family: 'ClashDisplay-Semibold';
    }
    .hero-title .stroke {
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.65);
    }
    .hero-copy {
      color: #c2c2c8;
      font-size: 1.1rem;
      max-width: 660px;
      line-height: 1.8;
      margin-bottom: 34px;
    }
    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 25px;
    }
    .pill {
      padding: 9px 13px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.03);
      color: #cfcfd3;
      font-size: .79rem;
      font-weight: 700;
    }
    .hero-panel {
      position: relative;
      min-height: 500px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 32px;
      background:
        radial-gradient(circle at 55% 35%, rgba(255,31,45,.35), transparent 32%),
        linear-gradient(145deg, #151518, #080809);
      box-shadow: var(--shadow);
      overflow: hidden;
      isolation: isolate;
    }
    .hero-orbit, .hero-orbit::before, .hero-orbit::after {
      position: absolute;
      content: "";
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .hero-orbit { width: 360px; height: 360px; }
    .hero-orbit::before { width: 260px; height: 260px; }
    .hero-orbit::after { width: 460px; height: 460px; }
    .hero-core {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      transform: translate(-50%, -50%) rotate(45deg);
      border-radius: 30px;
      background: linear-gradient(145deg, #ff3441, #b70410);
      box-shadow: 0 0 90px rgba(255,31,45,.45);
    }
    .hero-core::after {
      content: "ZE";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      transform: rotate(-45deg);
      color: #fff;
      font-size: 2.3rem;
      font-weight: 900;
      letter-spacing: -.08em;
    }
    .float-card {
      position: absolute;
      padding: 12px 15px;
      border-radius: 15px;
      border: 1px solid var(--border);
      background: rgba(12,12,14,.75);
      backdrop-filter: blur(10px);
      box-shadow: 0 20px 50px rgba(0,0,0,.28);
    }
    .float-card strong {
      display: block;
      font-size: 1.15rem;
    }
    .float-card span {
      display: block;
      color: #98989e;
      font-size: .7rem;
      margin-top: 2px;
    }
    .float-1 { left: 25px; top: 35px; }
    .float-2 { right: 25px; top: 90px; }
    .float-3 { left: 55px; bottom: 45px; }
    .float-4 { right: 38px; bottom: 35px; }

    /* Marquee */
    .marquee {
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: #09090a;
    }
    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 25s linear infinite;
      padding: 18px 0;
    }
    .marquee-item {
      display: flex;
      align-items: center;
      gap: 35px;
      padding-right: 35px;
      color: #d1d1d5;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: .09em;
      text-transform: uppercase;
      font-family: 'ClashDisplay-Medium';
    }
    .marquee-item::after {
      content: "✦";
      color: var(--red);
    }
    @keyframes marquee {
      to { transform: translateX(-50%); }
    }

    /* Cards */
    .service-card {
      height: 100%;
      padding: 30px;
      border: 1px solid #ccc;
      border-radius: var(--radius);
      background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
      transition: .3s ease;
      position: relative;
      overflow: hidden;
    }
    .service-card::before {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      top: -90px;
      right: -90px;
      background: rgb(175 175 175 / 14%);
      border-radius: 50%;
      transition: .4s;
    }
    .service-card:hover {
      transform: translateY(-7px);
      border-color: rgba(255,31,45,.42);
      box-shadow: 0 24px 60px rgba(0,0,0,.24);
    }
    .service-card:hover::before {
      transform: scale(2.1);
    }
    .service-icon {
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      margin-bottom: 24px;
      border-radius: 16px;
      background: rgba(255,31,45,.11);
      border: 1px solid rgba(255,31,45,.25);
      color: var(--red);
      font-size: 2rem;
    }
    .service-card h3 {
      font-size: 1.2rem;
      font-weight: 500;
      margin-bottom: 13px;
      color: var(--black);
      font-family: 'CLASHDISPLAY-MEDIUM';
      letter-spacing: 0.6px;
      line-height: 22px;
    }
    .service-card p {
      color: var(--black);
    line-height: 1.4;
    font-size: .8rem;
    margin-bottom: 0;
    font-weight: 300;
    }


    /* Portfolio */
    .portfolio-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-bottom: 30px;
    }
    .portfolio-filter-btn {
      border: 1px solid var(--border);
      color: #333;
      background: transparent;
      border-radius: 5px;
      padding: 5px 15px;
      font-size: 1rem;
      font-weight: 400;
      cursor: pointer;
      transition: .25s;
    }
    .portfolio-filter-btn:hover,
    .portfolio-filter-btn.active {
      color: #fff;
      background: var(--red);
      border-color: var(--red);
    }
    .portfolio-item.is-hidden {
      display: none;
    }
    .portfolio-card {
      height: 100%;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: #101012;
      overflow: hidden;
      transition: .3s ease;
    }
    .portfolio-card:hover {
      transform: translateY(-7px);
      border-color: rgba(255,31,45,.42);
      box-shadow: 0 24px 60px rgba(0,0,0,.28);
    }
    .portfolio-visual {
      min-height: 300px;
      position: relative;
      overflow: hidden;
      padding: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .portfolio-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.25));
      pointer-events: none;
    }
    .portfolio-visual-1 {
      background: radial-gradient(circle at 70% 20%, rgba(255,31,45,.30), transparent 32%), #161619;
    }
    .portfolio-visual-2 {
      background: radial-gradient(circle at 30% 30%, rgba(255,31,45,.22), transparent 35%), #111114;
    }
    .portfolio-visual-3 {
      background: radial-gradient(circle at 75% 75%, rgba(255,31,45,.28), transparent 35%), #131315;
    }
    .portfolio-visual-4 {
      background: radial-gradient(circle at 25% 25%, rgba(255,31,45,.24), transparent 35%), #111114;
    }
    .portfolio-visual-5 {
      background: radial-gradient(circle at 60% 20%, rgba(255,31,45,.26), transparent 34%), #151517;
    }
    .portfolio-visual-6 {
      background: radial-gradient(circle at 70% 70%, rgba(255,31,45,.22), transparent 35%), #121214;
    }
    .portfolio-badge {
      position: absolute;
      z-index: 3;
      top: 17px;
      left: 17px;
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(5,5,5,.6);
      backdrop-filter: blur(8px);
      border-radius: 999px;
      color: #fff;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .portfolio-info {
      padding: 23px 23px 25px;
      display: flex;
      justify-content: space-between;
      gap: 15px;
    }
    .portfolio-info h3 {
      margin: 0 0 7px;
      font-size: 1.5rem;
      font-weight: 400;
    }
    .portfolio-info p {
      margin: 0;
      color: var(--muted);
      font-size: .84rem;
      line-height: 1.65;
    }
    .portfolio-arrow {
      min-width: 40px;
      width: 40px;
      height: 40px;
      border: 1px solid var(--border);
      border-radius: 11px;
      display: grid;
      place-items: center;
      color: #fff;
      flex-shrink: 0;
      transition: .25s;
    }
    .portfolio-card:hover .portfolio-arrow {
      background: var(--red);
      border-color: var(--red);
    }

    /* Portfolio mockups */
    .portfolio-browser {
      width: min(100%, 340px);
      background: #0a0a0b;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 15px;
      box-shadow: 0 25px 55px rgba(0,0,0,.35);
      transform: rotate(-3deg);
    }
    .browser-bar {
      display: flex;
      gap: 5px;
      padding: 9px 11px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .browser-bar span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #666;
    }
    .browser-content { padding: 20px; }
    .mock-line { border-radius: 99px; background: #ddd; margin-bottom: 8px; }
    .mock-line.lg { width: 62%; height: 9px; }
    .mock-line.sm { width: 38%; height: 6px; background: #666; }
    .mock-block {
      height: 90px;
      border-radius: 10px;
      margin: 18px 0;
      background: linear-gradient(135deg, var(--red), #7a0610);
    }
    .mock-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .mock-row div { height: 42px; border-radius:8px; background:#1f1f22; border:1px solid rgba(255,255,255,.06); }

    .shop-mock {
      width: min(100%, 350px);
      background: #f0f0f0;
      color: #111;
      border-radius: 17px;
      padding: 13px;
      transform: rotate(3deg);
      box-shadow: 0 25px 55px rgba(0,0,0,.35);
    }
    .shop-header { height:25px; background: #ddd; border-radius: 6px; margin-bottom: 12px; }
    .shop-products { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
    .shop-products div { background:#fff; border-radius:8px; padding:8px; }
    .shop-products span { display:block; height:78px; border-radius:6px; background: linear-gradient(145deg,#222,#555); margin-bottom:8px; }
    .shop-products div:nth-child(2) span { background: linear-gradient(145deg,#6a0a12,#f02b37); }
    .shop-products div:nth-child(3) span { background: linear-gradient(145deg,#333,#999); }
    .shop-products b { display:block; width:55%; height:7px; border-radius:99px; background:#bbb; }

    .chart-mock {
      width: min(100%, 330px);
      height: 210px;
      background:#0c0c0e;
      border:1px solid rgba(255,255,255,.09);
      border-radius:16px;
      padding:19px;
      position:relative;
      box-shadow:0 25px 55px rgba(0,0,0,.35);
    }
    .chart-top { display:flex; justify-content:space-between; }
    .chart-top span { width:48px; height:7px; border-radius:99px; background:#56565b; }
    .chart-top span:first-child { width:90px; background:#ddd; }
    .chart-bars { height:120px; display:flex; align-items:flex-end; gap:13px; margin-top:22px; }
    .chart-bars i { display:block; width:25px; border-radius:6px 6px 2px 2px; background:#3a3a3e; }
    .chart-bars i:nth-child(1){height:42%;}
    .chart-bars i:nth-child(2){height:60%; background:#7d1119;}
    .chart-bars i:nth-child(3){height:48%;}
    .chart-bars i:nth-child(4){height:76%; background:var(--red);}
    .chart-bars i:nth-child(5){height:66%;}
    .chart-bars i:nth-child(6){height:92%; background:#ff555e;}
    .chart-line { position:absolute; left:19px; right:19px; bottom:60px; height:2px; transform:rotate(-7deg); background:linear-gradient(90deg, transparent, #ff737b, transparent); }

    .dashboard-mock {
      width: min(100%, 350px);
      min-height: 215px;
      display:flex;
      background:#09090b;
      border:1px solid rgba(255,255,255,.09);
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 25px 55px rgba(0,0,0,.35);
    }
    .dash-side { width:52px; background:#151518; display:flex; flex-direction:column; align-items:center; gap:17px; padding-top:18px; }
    .dash-side i { width:19px; height:19px; border-radius:6px; background:#36363b; }
    .dash-side i:first-child { background:var(--red); }
    .dash-main { flex:1; padding:16px; }
    .dash-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .dash-cards span { height:42px; border-radius:8px; background:#1e1e22; }
    .dash-cards span:first-child { background:rgba(255,31,45,.22); }
    .dash-chart { height:112px; margin-top:13px; border-radius:9px; background:linear-gradient(180deg,rgba(255,255,255,.04),transparent); border-bottom:2px solid #3a3a3e; position:relative; }
    .dash-chart::after { content:""; position:absolute; left:8%; right:5%; bottom:20px; height:70px; border-top:2px solid var(--red); transform:skewY(-12deg); }

    .pos-mock { width:230px; position:relative; filter:drop-shadow(0 25px 25px rgba(0,0,0,.35)); }
    .pos-screen { height:155px; border-radius:16px 16px 8px 8px; border:8px solid #252529; background:#0a0a0c; padding:12px; }
    .pos-top { height:9px; width:65%; background:#55555b; border-radius:99px; margin-bottom:13px; }
    .pos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
    .pos-grid i { height:45px; background:#242428; border-radius:6px; }
    .pos-grid i:nth-child(2), .pos-grid i:nth-child(5) { background:#85131c; }
    .pos-base { width:150px; height:24px; margin:-2px auto 0; border-radius:0 0 14px 14px; background:#222226; }

    .seo-mock { width:min(100%, 330px); display:flex; align-items:center; justify-content:center; gap:25px; }
    .seo-ring { width:145px; height:145px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:1.55rem; background:conic-gradient(var(--red) 0 77%, #2c2c30 77% 100%); position:relative; }
    .seo-ring::after { content:""; position:absolute; inset:13px; border-radius:50%; background:#121214; }
    .seo-ring { color:#fff; }
    .seo-ring::before { content:"SEO"; position:absolute; z-index:2; }
    .seo-stat strong { display:block; font-size:2rem; font-weight:900; }
    .seo-stat span { color:#8d8d93; font-size:.72rem; }

    /* About */
    .about-wrap {
      position: relative;
      padding: 42px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background-color: #fff;
      /* background:
        linear-gradient(135deg, rgba(255,31,45,.08), rgba(255,255,255,.02)); */
      overflow: hidden;
    }
    .about-number {
      font-size: clamp(6rem, 16vw, 12rem);
      line-height: .75;
      font-weight: 900;
      color: rgba(255,255,255,.035);
      position: absolute;
      right: -20px;
      top: 35px;
      letter-spacing: -.09em;
    }
    .about-list {
      list-style: none;
      padding: 0;
      margin: 30px 0 0;
    }
    .about-list li {
      display: flex;
      gap: 12px;
      margin: 13px 0;
      color: #d6d6da;
      line-height: 1.6;
    }
     .about-list li span {
      color: var(--black-2);
     }
    .about-list i { color: var(--red); }

    /* Why choose */
    .reason {
      padding: 26px 0;
      border-bottom: 1px solid var(--border);
    }
    .reason:last-child { border-bottom: 0; }
    .reason-index {
      color: var(--red);
      font-weight: 400;
      font-size: 1rem;
      letter-spacing: .16em;
    }
    .reason h3 {
      font-size: 1.3rem;
      font-weight: 400;
      margin: 0 6px 0 7px 0;
    }
    .reason p {
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: .92rem;
    }

    /* Industries */
    #industries{
       background-color: #000;
      background:  radial-gradient(circle at 85% 15%, rgba(255, 31, 45, 0.25), transparent 25%), linear-gradient(145deg, rgb(23, 9, 11), rgb(11, 11, 13));
    background: radial-gradient(circle at 85% 15%, rgba(255, 31, 45, .25), transparent 25%), linear-gradient(145deg, #17090b, #0b0b0d); 
    }
    .industry-card {
      min-height: 170px;
      padding: 26px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--surface);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: .25s ease;
    }
    .industry-card:hover {
      border-color: rgba(255,31,45,.4);
      transform: translateY(-5px);
    }
    .industry-card i {
      color: var(--red);
      font-size: 2.1rem;
      font-weight: 200;
    }
    .industry-card h4 {
      margin: 0;
      font-weight: 400;
      font-size: 1.3rem;
    }

    /* Contact */
    .contact-box {
      
      padding: 50px;
      
      /* background:
        radial-gradient(circle at 85% 15%, rgba(255,31,45,.25), transparent 25%),
        linear-gradient(145deg, #17090b, #0b0b0d); */
    }
    .contact-bg{
       background:
        radial-gradient(circle at 85% 15%, rgba(255,31,45,.25), transparent 25%),
        linear-gradient(145deg, #17090b, #0b0b0d);
        border: 1px solid rgba(255,31,45,.25);
        padding: 50px;
        border-radius: 12px;
    }
    .contact-detail {
      display: flex;
      gap: 13px;
      align-items: flex-start;
      padding: 17px 0;
      border-bottom: 1px solid var(--border);
    }
    .contact-detail:last-child { border-bottom: 0; }
    .contact-detail i {
      color: var(--red);
      font-size: 1.15rem;
      margin-top: 2px;
    }
    .contact-detail small {
      display: block;
      color: #83838a;
      margin-bottom: 4px;
    }
    .contact-detail a, .contact-detail span {
      color: #0f0f16;
      font-weight: 400;
    }
    .form-control, .form-select {
      color: var(--white);
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border);
      border-radius: 12px;
      min-height: 52px;
      padding: 13px 15px;
    }
    .form-control::placeholder { color: #7e7e84; }
    .form-control:focus, .form-select:focus {
      color: var(--white);
      background: rgba(255,255,255,.07);
      border-color: rgba(255,31,45,.65);
      box-shadow: 0 0 0 .2rem rgba(255,31,45,.08);
    }
    textarea.form-control { min-height: 140px; resize: vertical; }

    /* Footer */
    .footer {
      background: #000;
      padding: 70px 0 25px;
      border-top: 1px solid var(--border);
    }
    .footer p, .footer a {
      color: #8d8d93;
      font-size: .9rem;
      line-height: 1.8;
    }
    .footer a:hover { color: #fff; }
    .footer-title {
      color: #fff;
      font-weight: 400;
      margin-bottom: 18px;
      font-size: 1.1rem;
    }
    .socials {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }
    .socials a {
      width: 40px;
      /* height: 60px; */
      display: grid;
      place-items: left;
      border: 1px solid var(--border);
      border-radius: 11px;
      color: #fff;
      transition: .25s;
      font-size: 1.5rem;
    }
    .socials a:hover {
      color:  var(--red);
      /* background: var(--red); */
      /* border-color: var(--red); */
    }
    .footer-bottom {
      margin-top: 55px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      color: #6f6f75;
      font-size: .78rem;
    }

    /* Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: .75s ease;
    }
    .reveal.show {
      opacity: 1;
      transform: translateY(0);
    }

    
/* ---------- Floating WhatsApp + Call ---------- */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 1050; display: flex; flex-direction: column; gap: 14px; }
.fab-btn {
  position: relative; isolation: isolate;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 1.6rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
  transition: transform .25s ease;
}
.fab-btn:hover { color: #fff; transform: scale(1.1); }
.fab-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fab-wa { background: #25d366; }
.fab-call { background: var(--red); }
.fab-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: inherit; animation: pulse 2.2s ease-out infinite;
}
.fab-call::before { animation-delay: 1.1s; }
@keyframes pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(1.8); opacity: 0; } }
.fab-tip {
  position: absolute; right: 68px; padding: 6px 12px; border-radius: 8px;
  background: #111; color: #fff; font-size: .8rem; letter-spacing: 0; white-space: nowrap;
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: .25s;
}
.fab-btn:hover .fab-tip, .fab-btn:focus-visible .fab-tip { opacity: 1; transform: none; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: .75s ease; }
.reveal.show { opacity: 1; transform: translateY(0); }

    @media (max-width: 991.98px) {
      .hero { min-height: auto; padding-top: 140px; }
      .hero-panel { min-height: 430px; margin-top: 25px; }
      .navbar .btn-red { margin-top: 12px; }
      .section-space { padding: 80px 0; }
    }
     @media (max-width: 767px) {
  .hero-grid {
      opacity: .40;background-size: 200%;
  }
     }

    @media (max-width: 575.98px) {
      .hero-title { font-size: 3.4rem; }
      .hero-panel { min-height: 360px; border-radius: 24px; }
      .hero-core { width: 105px; height: 105px; border-radius: 23px; }
      .hero-orbit { width: 260px; height: 260px; }
      .hero-orbit::before { width: 190px; height: 190px; }
      .hero-orbit::after { width: 330px; height: 330px; }
      .float-card { padding: 9px 11px; }
      .float-card strong { font-size: .95rem; }
      .about-wrap, .contact-box { padding: 28px 22px; }
    }