:root{
    --ink:#0b0b0c;
    --ink-soft:#151517;
    --ink-card:#1b1b1d;
    --bone:#ece8df;
    --bone-dim:#b9b6ac;
    --chrome:#9a9d9f;
    --chrome-dim:#4d4f51;
    --brake:#c8102e;
    --brake-soft:#8a0c20;
    --line: rgba(236,232,223,0.1);
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--ink);
    color:var(--bone);
    font-family:'Barlow', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

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

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

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

  h1,h2,h3{
    font-family:'Anton', sans-serif;
    text-transform:uppercase;
    font-weight:400;
    letter-spacing:0.01em;
    line-height:0.95;
  }

  .eyebrow{
    font-family:'Barlow Condensed', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.28em;
    font-size:12.5px;
    font-weight:600;
    color:var(--brake);
  }

  /* ---------- chain divider (signature element) ---------- */
  .chain{
    height:26px;
    width:100%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='26' viewBox='0 0 42 26'%3E%3Ccircle cx='7' cy='13' r='6' fill='none' stroke='%239a9d9f' stroke-width='2'/%3E%3Ccircle cx='31' cy='13' r='6' fill='none' stroke='%239a9d9f' stroke-width='2'/%3E%3Cline x1='13' y1='13' x2='25' y2='13' stroke='%239a9d9f' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-position:0 center;
    background-size:42px 26px;
    opacity:0.55;
    animation:chainRun 14s linear infinite;
  }
  @keyframes chainRun{ from{background-position:0 center;} to{background-position:-420px center;} }

  /* ---------- scratch texture ---------- */
  .texture{
    position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(115deg, rgba(236,232,223,0.035) 0px, rgba(236,232,223,0.035) 1px, transparent 1px, transparent 34px),
      repeating-linear-gradient(25deg, rgba(236,232,223,0.02) 0px, rgba(236,232,223,0.02) 1px, transparent 1px, transparent 60px);
    pointer-events:none;
  }

  /* ---------- nav ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(11,11,12,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 32px;
    max-width:1180px;margin:0 auto;
  }
  .brandmark{display:flex;align-items:center;gap:12px;}
  .brandmark img{width:42px;height:42px;border-radius:50%;}
  .brandmark span{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:0.03em;}
  .navlinks{display:flex;gap:36px;align-items:center;}
  .navlinks a{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:0.06em;
    color:var(--bone-dim);
    transition:color .2s ease;
    position:relative;
  }
  .navlinks a:hover, .navlinks a:focus-visible{color:var(--bone);}
  .navlinks a::after{
    content:"";position:absolute;left:0;bottom:-6px;width:0%;height:2px;background:var(--brake);
    transition:width .25s ease;
  }
  .navlinks a:hover::after{width:100%;}
  .cta-btn{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:0.06em;
    font-size:14px;
    background:var(--brake);
    color:var(--bone);
    padding:11px 22px;
    border:none;
    border-radius:2px;
    cursor:pointer;
    transition:transform .15s ease, background .2s ease;
    display:inline-block;
  }
  .cta-btn:hover{background:#e0132f;transform:translateY(-2px);}
  .cta-btn:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--brake);outline-offset:3px;}
  .cta-ghost{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;font-weight:700;letter-spacing:0.06em;font-size:14px;
    border:1.5px solid var(--chrome-dim);color:var(--bone);
    padding:10px 22px;border-radius:2px;background:transparent;cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  .cta-ghost:hover{border-color:var(--bone);}

  .burger{display:none;background:none;border:none;color:var(--bone);font-size:28px;cursor:pointer;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:96px 32px 90px;
    overflow:hidden;
  }
  .hero-inner{
    max-width:1180px;margin:0 auto;
    display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;
    position:relative;z-index:2;
  }
  .hero h1{
    font-size:clamp(42px, 4.6vw, 104px);
    color:var(--bone);
  }
  .hero h1 em{
    font-style:normal;color:var(--brake);
  }
  .hero p{
    
    
    line-height:1.6;
    color:var(--bone-dim);
    max-width:46ch;
  }
  .hero-ctas{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
  .hero-badge{
    position:relative;
    display:flex;align-items:center;justify-content:center;

  }
 
  @keyframes spin{ to{ transform:rotate(360deg);} }
  .hero-badge img{
    margin-top: -200PX ;
    width:200%;max-width:700px;
    filter:drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
   
  }
  @keyframes spinSlow{ to{ transform:rotate(360deg);} }

  .hero-stats{
    display:flex;gap:38px;margin-top:52px;flex-wrap:wrap;
  }

        .container {
            width: 90%;
            max-width: 1100px;
            margin: auto;
            padding: 70px 0;
        }

        /* Hero */
        .hero1 {
            text-align: center;
            margin-bottom: 80px;
            margin-top: -100PX;
        }

        .hero1 h1 {
            font-size: 42px;
            margin-bottom: 10px;
            color: #fc0000;
        }

        .hero1 p {
            font-size: 17px;
            color: #fffefe;
            margin-bottom: 35px;
        }

        .hero1 .brand {
            font-weight: bold;
        }

        .btn {
            display: inline-block;
            background: #ff0000;
            color: rgb(0, 0, 0);
            text-decoration: none;
            padding: 16px 25px;
            font-size: 16px;
            border-radius: 2px;
            transition: 0.3s;
        }

        .btn:hover {
            background: #ffffff;
        }

        /* Grid */
        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px 90px;
        }

        .box {
            position: relative;
            padding-left: 75px;
            margin-top: -20px;
        }

        .icon {
            position: absolute;
            left: 0;
            top: 0;
            width: 55px;
            height: 55px;
            background: #4a4a4a;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            border-radius: 2px;
        }

        .box h2 {
            font-size: 20px;
            margin-bottom: 18px;
            color: #ff0000;
        }

        .box p {
            font-size: 15px;
            line-height: 1.8;
            color: #ffffff;
        }

        /* Responsive */
        @media (max-width: 750px) {

            .container {
                width: 88%;
                padding: 40px 0;
            }

            .hero {
                margin-bottom: 50px;
            }

            .hero h1 {
                font-size: 32px;
            }

            .content {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .box {
                padding-left: 70px;
            }
        }
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #171313;
    color: white;
    min-height: 100vh;

    /* خطوط خفيفة فالباكغراوند */
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 8px
        );
}


/* =========================
   FEATURES
========================= */

.features {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;

    padding: 60px 20px 45px;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}


.feature h3 {
    color: #f50000;
    font-size: 21px;
    margin-bottom: 12px;
}

.feature p {
    color: #d0cccc;
    font-size: 14px;
    line-height: 1.6;
    max-width: 280px;
}


/* =========================
   PRODUCTS
========================= */

.products {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;

    padding: 15px 20px 60px;
}

.product-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    overflow: hidden;

    transition: 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}


/* Product image */

.product-image {
    width: 100%;

    background: #ddd;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* Product text */

.product-card h4 {
    font-size: 17px;
    margin-top: 18px;
    margin-left: 5px;

    color: white;
}

.product-card p {
    font-size: 14px;
    color: #d0cccc;

    margin-top: 8px;
    margin-left: 5px;
    margin-bottom: 20px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {

    .features {
        grid-template-columns: 1fr;
        gap: 35px;
    }

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

    .product-image {
        height: 500px;
    }
}


@media (max-width: 500px) {

    .features {
        width: 100%;
        padding: 35px 20px;
    }

    .feature h3 {
        font-size: 18px;
    }

    .feature p {
        font-size: 13px;
    }

    .products {
        width: 100%;
        padding: 10px 20px 40px;
    }

    .product-image {
        height: 400px;
    }
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 70px auto;
}

/* =========================
   4 VALUES
========================= */

.values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    row-gap: 70px;
    margin-top: -60PX;
}

.value-card {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.number {
    min-width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ff0000;
    color: white;

    border-radius: 50%;

    font-size: 20px;
    font-weight: bold;
}

.content h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #ffffff;
}

.content p {
    font-size: 15px;
    line-height: 1.7;
    color: #fffbfb;
    max-width: 480px;
}


/* =========================
   WHO WE ARE
========================= */

.who-we-are {
    margin-top: 100px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.who-we-are h1 {
    font-size: 38px;
    font-weight: 600;
    color: #fffefe;
}

.line {
    width: 60px;
    height: 3px;
    background: #ff0000;
    margin: 18px auto 35px;
}

.who-we-are p {
    font-size: 15px;
    line-height: 1.9;
    color: #fffafa;
    margin-bottom: 20px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

    .container {
        width: 90%;
        margin: 40px auto;
    }

    .values {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .value-card {
        gap: 18px;
    }

    .content h2 {
        font-size: 18px;
    }

    .content p {
        font-size: 14px;
    }

    .who-we-are {
        margin-top: 70px;
    }

    .who-we-are h1 {
        font-size: 30px;
    }
}
  .hero-stats div{border-left:2px solid var(--brake);padding-left:14px;}
  .hero-stats strong{display:block;font-family:'Anton',sans-serif;font-size:28px;}
  .hero-stats span{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--chrome);}

  /* ---------- section shared ---------- */
  section{position:relative;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head h2{font-size:clamp(34px,4.4vw,54px);margin-top:10px;}
  .section-head p{color:var(--bone-dim);margin-top:16px;font-size:17px;line-height:1.65;}
  .bg-soft{background:var(--ink-soft);}

  /* ---------- pillars ---------- */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .pillar{
    background:var(--ink);
    padding:44px 34px;
    transition:background .25s ease;
  }
  .pillar:hover{background:var(--ink-card);}
  .pillar .icon{width:44px;height:44px;margin-bottom:22px;color:var(--brake);}
  .pillar h3{font-size:24px;margin-bottom:14px;}
  .pillar p{color:var(--bone-dim);line-height:1.6;font-size:15.5px;}

  /* ---------- collection ---------- */
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .gear-card{
    background:var(--ink-card);
    border:1px solid var(--line);
    border-radius:3px;
    padding:30px 24px 26px;
    transition:transform .25s ease, border-color .25s ease;
  }
  .gear-card:hover{transform:translateY(-6px);border-color:var(--brake-soft);}
  .gear-card .icon{width:38px;height:38px;color:var(--chrome);margin-bottom:20px;}
  .gear-card h3{font-size:19px;letter-spacing:0.02em;margin-bottom:10px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;}
  .gear-card p{font-size:14.5px;color:var(--bone-dim);line-height:1.55;}

  /* ---------- community ---------- */
  .community{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  }
  .quote{
    font-family:'Anton',sans-serif;
    font-size:clamp(28px,3.2vw,40px);
    line-height:1.15;
    color:var(--bone);
  }
  .quote span{color:var(--brake);}
  .quote-by{margin-top:22px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:0.08em;font-size:13.5px;color:var(--chrome);}
  .stat-list{display:flex;flex-direction:column;gap:0;}
  .stat-row{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:22px 0;border-bottom:1px solid var(--line);
  }
  .stat-row:first-child{border-top:1px solid var(--line);}
  .stat-row strong{font-family:'Anton',sans-serif;font-size:36px;}
  .stat-row span{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:13.5px;letter-spacing:0.06em;color:var(--bone-dim);}

  /* ---------- join ---------- */
  .join{
    text-align:center;
    padding:110px 0;
  }
  .join h2{font-size:clamp(36px,6vw,66px);
  color: #e0132f;}
  .join p{color:var(--bone-dim);max-width:52ch;margin:18px auto 40px;font-size:17px;line-height:1.6;}


  /* ---------- footer ---------- */
  footer{padding:56px 0 40px;border-top:1px solid var(--line);}
  .foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;}
  .foot-brand{display:flex;align-items:center;gap:14px;}
  .foot-brand img{width:48px;height:48px;border-radius:50%;}
  .foot-tag{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:0.1em;font-size:13px;color:var(--chrome);margin-top:4px;}
  .foot-links{display:flex;gap:30px;}
  .foot-links a{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:13.5px;letter-spacing:0.05em;color:var(--bone-dim);}
  .foot-links a:hover{color:var(--bone);}
  .social{display:flex;gap:16px;}
  .social a{width:36px;height:36px;border:1px solid var(--chrome-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,color .2s ease;color:var(--chrome);}
  .social a:hover{border-color:var(--brake);color:var(--brake);}
  .social svg{width:16px;height:16px;}
  .copyright{margin-top:40px;font-size:12.5px;color:var(--chrome-dim);font-family:'Barlow Condensed',sans-serif;letter-spacing:0.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .navlinks{display:none;}
    .burger{display:block;}
    .hero-inner{grid-template-columns:1fr;text-align:left;}
    .hero-badge{order:-1;max-width:260px;margin:0 auto 20px;}
    .pillars{grid-template-columns:1fr;}
    .grid4{grid-template-columns:repeat(2,1fr);}
    .community{grid-template-columns:1fr;gap:40px;}
  }
  @media (max-width:520px){
    .grid4{grid-template-columns:1fr;}
    .wrap, nav, .hero, section{padding-left:20px;padding-right:20px;}
    .foot-top{flex-direction:column;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }