/* =========================================================
   CÂINE RĂU — MAIN PAGE CSS
   Brand homepage + mobile UX inspired by B2B page
========================================================= */

/* ------------------------------
   ROOT
------------------------------ */

:root{
  --bg:#0b0b0d;
  --bg-2:#111113;
  --bg-3:#17171b;
  --surface:#131316;
  --surface-2:#19191e;

  --paper:#f7f7f9;
  --paper-2:#ffffff;

  --brand:#cf1020;
  --brand-dark:#a20d19;
  --brand-2:#f59f00;

  --text:#f2f2f4;
  --text-soft:#c9c9d1;
  --text-muted:#8f8f98;
  --text-dark:#111111;
  --text-dark-muted:#62626b;

  --border:rgba(255,255,255,.11);
  --border-strong:rgba(255,255,255,.18);
  --border-dark:rgba(0,0,0,.09);

  --heat-1:#ffef00;
  --heat-2:#fcc419;
  --heat-3:#f59f00;
  --heat-4:#e8590c;
  --heat-5:#cf1020;

  --font-display:'Oswald', sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container-max:1240px;
  --container-padding:clamp(18px, 5vw, 56px);

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;

  --navH:74px;

  --shadow:0 18px 48px rgba(0,0,0,.32);
  --shadow-lg:0 28px 80px rgba(0,0,0,.48);
  --shadow-red:0 16px 44px rgba(207,16,32,.22);

  --h1:clamp(3.1rem, 9vw, 8rem);
  --h2:clamp(2rem, 5vw, 4rem);
  --h3:clamp(1.35rem, 2.2vw, 2rem);
}

/* ------------------------------
   RESET
------------------------------ */

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

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.40;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

img,
svg{
  display:block;
  max-width:100%;
  height:auto;
}

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

button,
input,
textarea,
select{
  font:inherit;
}

button{
  border:0;
  background:none;
  cursor:pointer;
}

ul{
  list-style:none;
}

::selection{
  background:var(--brand);
  color:#fff;
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ------------------------------
   ACCESSIBILITY
------------------------------ */

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  z-index:10000;
  padding:.65rem .9rem;
  border-radius:999px;
  background:#fff;
  color:#000;
}

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ------------------------------
   GLOBAL LAYOUT
------------------------------ */

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-padding);
}

.section{
  position:relative;
  z-index:2;
  padding-block:clamp(70px, 10vw, 130px);
  border-top:1px solid var(--border);
  scroll-margin-top:calc(var(--navH) + 16px);
}

.section--dark{
  background:var(--bg);
  color:var(--text);
}

.section--surface{
  background:var(--bg-2);
  color:var(--text);
}

.section--light{
  background:var(--paper);
  color:var(--text-dark);
  border-top:0;
}

.section--light + .section--light{
  border-top:1px solid rgba(0,0,0,.07);
}

.section-head{
  display:grid;
  gap:16px;
  max-width:880px;
  margin-bottom:clamp(34px, 5vw, 58px);
}

.section-head--center{
  margin-inline:auto;
  text-align:center;
  justify-items:center;
}

.section-head p{
  max-width:760px;
  color:var(--text-muted);
  font-size:clamp(1rem, 1.2vw, 1.12rem);
}

.section--light .section-head p{
  color:var(--text-dark-muted);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:inherit;
  gap:12px;
  color:var(--brand-2);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.14em;
  line-height:1.25;
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  display:inline-block;
  width:32px;
  height:2px;
  background:currentColor;
  flex:0 0 auto;
}

.section-head--center .eyebrow::after{
  content:"";
  display:inline-block;
  width:32px;
  height:2px;
  background:currentColor;
  flex:0 0 auto;
}

h1,
h2,
h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:.02em;
  text-transform:uppercase;
}

h1{
  font-size:var(--h1);
}

h2{
  font-size:var(--h2);
}

h3{
  font-size:var(--h3);
}

p{
  color:var(--text-soft);
}

.text-accent{
  color:var(--brand);
}

.text-orange{
  color:var(--brand-2);
}

/* ------------------------------
   BUTTONS
------------------------------ */

.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:48px;
  padding:14px 24px;
  overflow:hidden;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:var(--font-display);
  font-size:.88rem;
  font-weight:500;
  letter-spacing:.07em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .25s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--brand);
  transform:translateY(104%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}

.btn:hover{
  border-color:var(--brand);
  transform:translateY(-2px);
  box-shadow:var(--shadow-red);
}

.btn:hover::before{
  transform:translateY(0);
}

.btn:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

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

.btn--primary::before{
  background:var(--brand-dark);
}

.btn--ghost{
  background:rgba(255,255,255,.045);
}

.btn--dark{
  background:#111;
  border-color:#111;
  color:#fff;
}

.btn--dark::before{
  background:var(--brand);
}

.btn--small{
  min-height:40px;
  padding:11px 18px;
  font-size:.76rem;
}

.btn-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

/* ------------------------------
   HEADER
------------------------------ */

.site-head{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  min-height:var(--navH);
  z-index:1000;
  display:flex;
  align-items:center;
  background:rgba(11,11,13,.86);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:#fff;
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1;
  text-transform:uppercase;
  transition:filter .25s ease, transform .25s ease;
}

.brand img{
  width:34px;
  height:auto;
  flex:0 0 auto;
}

.brand span{
  color:var(--brand);
}

.brand:hover{
  filter:drop-shadow(0 0 12px rgba(207,16,32,.65));
  transform:translateY(-1px);
}

.nav-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.nav-link{
  color:rgba(255,255,255,.74);
  font-size:.86rem;
  font-weight:800;
  padding:8px 10px;
  transition:color .25s ease;
}

.nav-link:hover{
  color:#fff;
}

@media(max-width:820px){
  .nav-link{
    display:none;
  }
}

@media(max-width:620px){
  :root{
    --navH:68px;
  }

  .site-head{
    min-height:var(--navH);
  }

  .brand{
    font-size:1.08rem;
  }

  .brand img{
    width:30px;
  }

  .nav-actions{
    gap:5px;
  }

  .nav-actions .btn{
    min-height:25px;
    padding:5px 7px;
    font-size:.68rem;
  }
}

@media(max-width:420px){
  .nav-actions .btn--ghost{
    display:none;
  }
}

/* ------------------------------
   HERO
------------------------------ */

.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding-top:var(--navH);
  background-image:url("assets/hero.png");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 74% 34%, rgba(207,16,32,.28), transparent 34%),
    linear-gradient(90deg, rgba(11,11,13,.96) 0%, rgba(11,11,13,.78) 48%, rgba(11,11,13,.40) 100%),
    linear-gradient(180deg, rgba(11,11,13,.28) 0%, rgba(11,11,13,1) 100%);
}

.hero__bg-text{
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  transform:translate(-50%, -50%) rotate(-2deg);
  color:#fff;
  opacity:.045;
  font-family:var(--font-display);
  font-size:clamp(9rem, 28vw, 30rem);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, .98fr) minmax(320px, .78fr);
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
  padding-block:clamp(82px, 12vw, 150px);
}

.hero__content{
  max-width:820px;
}

.display-text{
  max-width:920px;
  margin:16px 0 26px;
  letter-spacing:-.025em;
}

.hero__lead{
  max-width:620px;
  margin-bottom:32px;
  color:#d7d7dd;
  font-size:clamp(1.05rem, 1.1vw + .7rem, 1.32rem);
  line-height:1.65;
}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.hero-product-card{
  position:relative;
  overflow:hidden;
  padding:clamp(22px, 3vw, 34px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.hero-product-card::before{
  content:"";
  position:absolute;
  left:50%;
  top:45%;
  width:72%;
  height:60%;
  transform:translate(-50%, -50%);
  z-index:-1;
  border-radius:50%;
  background:var(--brand);
  opacity:.16;
  filter:blur(50px);
}

.hero-product-card img{
  width:min(520px, 100%);
  margin-inline:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.5));
}

.hero-product-card__badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}

.hero-product-card__badges span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(0,0,0,.24);
  color:#d7d7dd;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:900px){
  .hero{
    min-height:auto;
    background-attachment:scroll;
    background-position:center;
  }

  .hero::before{
    background:
      radial-gradient(circle at 50% 22%, rgba(207,16,32,.22), transparent 42%),
      linear-gradient(180deg, rgba(11,11,13,.88) 0%, rgba(11,11,13,.98) 78%);
  }

  .hero-grid{
    grid-template-columns:1fr;
    padding-block:44px 82px;
  }

  .hero-product-card{
    order:-1;
    margin-top:22px;
  }

  .hero-product-card img{
    width:min(420px, 92%);
  }

  .hero__content{
    max-width:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .hero__lead{
    max-width:560px;
  }

  .hero__cta{
    width:100%;
    justify-content:center;
  }

  .hero__cta .btn{
    width:100%;
    max-width:340px;
  }
}

/* ------------------------------
   MARQUEE
------------------------------ */

.marquee{
  position:relative;
  z-index:3;
  overflow:hidden;
  margin-block:0;
  padding:12px 0;
  background:var(--brand);
  transform:rotate(-1deg);
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}

.marquee__inner{
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:marquee-scroll 22s linear infinite;
}

.marquee span{
  display:inline-flex;
  margin-right:42px;
  color:#050505;
  font-family:var(--font-display);
  font-size:clamp(1.15rem, 2vw, 1.65rem);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
}

@keyframes marquee-scroll{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-33.333%);
  }
}

/* ------------------------------
   BRAND PROOF
------------------------------ */

.brand-proof{
  background:
    radial-gradient(circle at 20% 0%, rgba(207,16,32,.16), transparent 34%),
    linear-gradient(180deg, #0b0b0d, #111113);
}

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

.proof-card{
  position:relative;
  overflow:hidden;
  min-height:230px;
  padding:30px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:var(--shadow);
}

.proof-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}

.proof-card__number{
  display:block;
  margin-bottom:22px;
  color:rgba(255,255,255,.18);
  font-family:var(--font-display);
  font-size:3rem;
  font-weight:700;
  line-height:1;
}

.proof-card h3{
  margin-bottom:14px;
  color:#fff;
  font-size:1.55rem;
}

.proof-card p{
  color:#bdbdc5;
}

@media(max-width:900px){
  .proof-grid{
    grid-template-columns:1fr;
  }

  .proof-card{
    min-height:auto;
  }
}

/* ------------------------------
   PRODUCTS
------------------------------ */

.products-section{
  background:var(--paper);
  color:var(--text-dark);
}

.products-section p{
  color:#47474f;
}

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

.product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  overflow:hidden;
  border:1px solid #e6e6ed;
  border-radius:var(--radius);
  background:#fff;
  color:#111;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.product-card:hover{
  transform:translateY(-8px);
  border-color:rgba(207,16,32,.32);
  box-shadow:0 18px 48px rgba(0,0,0,.12);
}

.product-card__media{
  position:relative;
  height:330px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at center, #fff 0%, #f0f0f4 44%, #e5e5eb 100%);
}

.product-card__media::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:34px;
  width:50%;
  height:24px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(0,0,0,.18);
  filter:blur(12px);
}

.product-card__media img{
  position:relative;
  z-index:2;
  max-height:82%;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.22));
  transition:
    transform .45s ease,
    filter .45s ease;
}

.product-card:hover .product-card__media img{
  transform:scale(1.05) rotate(3deg);
  filter:drop-shadow(0 22px 28px rgba(207,16,32,.24));
}

.product-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:24px;
}

.product-card__title{
  margin-bottom:9px;
  color:#111;
  font-size:1.6rem;
}

.product-card__desc{
  margin-bottom:18px;
  color:#52525a;
  font-size:.96rem;
  line-height:1.55;
}

.product-mini-data{
  display:grid;
  gap:8px;
  margin-top:auto;
}

.product-mini-data div{
  display:grid;
  gap:2px;
  padding-top:8px;
  border-top:1px solid #ececf2;
}

.product-mini-data strong{
  color:#111;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.product-mini-data span{
  color:#64646d;
  font-size:.88rem;
}

.product-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #ececf2;
}

.product-card__cta{
  display:inline-flex;
  align-items:center;
  color:var(--brand);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.heat-label{
  display:inline-flex;
  color:#666671;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.scale{
  display:flex;
  align-items:center;
  gap:8px;
}

.scale__bar{
  display:flex;
  gap:4px;
  width:72px;
}

.scale__bar > span{
  flex:1;
  height:14px;
  border-radius:3px;
  background:#dfdfe7;
  transform:skewX(-18deg);
  transform-origin:bottom;
  animation:none;
}

.scale__bar[style*="--heat-level: 1"] > span:nth-child(1),
.scale__bar[style*="--heat-level: 2"] > span:nth-child(1),
.scale__bar[style*="--heat-level: 3"] > span:nth-child(1),
.scale__bar[style*="--heat-level: 4"] > span:nth-child(1),
.scale__bar[style*="--heat-level: 5"] > span:nth-child(1){
  background:var(--heat-1);
  box-shadow:0 0 7px rgba(255,239,0,.34);
}

.scale__bar[style*="--heat-level: 2"] > span:nth-child(2),
.scale__bar[style*="--heat-level: 3"] > span:nth-child(2),
.scale__bar[style*="--heat-level: 4"] > span:nth-child(2),
.scale__bar[style*="--heat-level: 5"] > span:nth-child(2){
  background:var(--heat-2);
  box-shadow:0 0 7px rgba(252,196,25,.34);
}

.scale__bar[style*="--heat-level: 3"] > span:nth-child(3),
.scale__bar[style*="--heat-level: 4"] > span:nth-child(3),
.scale__bar[style*="--heat-level: 5"] > span:nth-child(3){
  background:var(--heat-3);
  box-shadow:0 0 7px rgba(245,159,0,.34);
}

.scale__bar[style*="--heat-level: 4"] > span:nth-child(4),
.scale__bar[style*="--heat-level: 5"] > span:nth-child(4){
  background:var(--heat-4);
  box-shadow:0 0 7px rgba(232,89,12,.34);
}

.scale__bar[style*="--heat-level: 5"] > span:nth-child(5){
  background:var(--heat-5);
  box-shadow:0 0 7px rgba(207,16,32,.34);
}

.scale__bar--flames[style*="--heat-level: 5"] > span{
  background:var(--brand) !important;
  box-shadow:0 0 9px rgba(207,16,32,.6) !important;
  animation:hot-flame .72s ease-in-out infinite alternate;
}

.scale__bar--flames > span:nth-child(1){ animation-delay:.05s; }
.scale__bar--flames > span:nth-child(2){ animation-delay:.12s; }
.scale__bar--flames > span:nth-child(3){ animation-delay:.20s; }
.scale__bar--flames > span:nth-child(4){ animation-delay:.15s; }
.scale__bar--flames > span:nth-child(5){ animation-delay:.08s; }

@keyframes hot-flame{
  0%{
    transform:skewX(-18deg) scaleY(1);
    opacity:.9;
  }

  100%{
    transform:skewX(-18deg) scaleY(1.36);
    opacity:1;
  }
}

@media(max-width:1050px){
  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:680px){
  .product-grid{
    grid-template-columns:1fr;
  }

  .product-card__media{
    height:300px;
  }
}

/* ------------------------------
   AVAILABILITY BOX
------------------------------ */

.availability-box{
  margin-top:48px;
  padding:clamp(28px, 5vw, 46px);
  border:1px solid rgba(207,16,32,.20);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 16% 0%, rgba(207,16,32,.16), transparent 34%),
    linear-gradient(180deg, #151518, #101012);
  color:#fff;
  text-align:center;
  box-shadow:var(--shadow);
}

.availability-box h3{
  margin:14px 0;
  color:#fff;
  font-size:clamp(1.6rem, 3vw, 2.35rem);
}

.availability-box p{
  max-width:720px;
  margin:0 auto 28px;
  color:#cfcfd6;
  font-size:1.04rem;
}

.availability-box__actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

@media(max-width:620px){
  .availability-box__actions .btn{
    width:100%;
  }
}

/* ------------------------------
   PARTNER STRIP
------------------------------ */

.partner-strip{
  padding-block:28px;
  background:#fff;
  color:#111;
  border-top:1px solid #ececf2;
  border-bottom:1px solid #ececf2;
}

.partner-strip__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}

.partner-strip__label{
  color:#5e5e67;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.partner-strip img{
  max-height:36px;
  width:auto;
  max-width:130px;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.72;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}

.partner-strip img:hover{
  filter:grayscale(0%);
  opacity:1;
  transform:translateY(-2px);
}

/* ------------------------------
   B2B STRIP
------------------------------ */

.b2b-strip{
  background:
    radial-gradient(circle at 86% 18%, rgba(245,159,0,.16), transparent 28%),
    radial-gradient(circle at 14% 0%, rgba(207,16,32,.18), transparent 34%),
    #0b0b0d;
  color:#fff;
}

.b2b-strip__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:34px;
  align-items:center;
  padding:clamp(32px, 5vw, 54px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow:var(--shadow);
}

.b2b-strip h2{
  margin:14px 0 16px;
  font-size:clamp(2rem, 4vw, 3.5rem);
}

.b2b-strip p{
  max-width:760px;
  color:#c9c9d1;
  font-size:1.05rem;
}

@media(max-width:820px){
  .b2b-strip__inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .b2b-strip .btn{
    width:100%;
  }
}

/* ------------------------------
   STORY
------------------------------ */

.story-section{
  position:relative;
  overflow:hidden;
  padding-block:clamp(90px, 12vw, 165px);
  background:
    radial-gradient(circle at 72% 18%, rgba(207,16,32,.22), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(245,159,0,.12), transparent 32%),
    linear-gradient(180deg, #0b0b0d, #111113);
  color:#fff;
  text-align:center;
}

.story-card{
  position:relative;
  max-width:890px;
  margin-inline:auto;
  padding:clamp(38px, 7vw, 78px);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:rgba(20,20,22,.62);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.story-card::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:130px;
  height:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}

.story-title{
  margin:22px 0 28px;
  font-size:clamp(2.2rem, 5.5vw, 4.7rem);
}

.story-text{
  max-width:700px;
  margin:0 auto 42px;
  color:#d0d0d7;
  font-size:clamp(1.05rem, 1vw + .8rem, 1.28rem);
  line-height:1.75;
}

.story-signature{
  display:inline-block;
  padding-top:22px;
  border-top:1px solid var(--border);
}

.sig-content{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px 30px;
  color:var(--text-muted);
  font-family:var(--font-display);
  font-size:.88rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.batch-no{
  color:var(--brand);
}

/* ------------------------------
   COMIC SECTION
------------------------------ */

.comic-section{
  background:#0b0b0d;
  color:#fff;
}

.comic-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(34px, 6vw, 72px);
}

.comic-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.comic-image::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:78%;
  height:78%;
  border-radius:50%;
  background:var(--brand);
  opacity:.22;
  filter:blur(54px);
}

.comic-image img{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  animation:float-gift 6s ease-in-out infinite;
}

@keyframes float-gift{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-14px);
  }
}

.comic-content .section-title{
  margin:14px 0 22px;
}

.comic-content p{
  max-width:560px;
  margin-bottom:24px;
  color:#c8c8cf;
  font-size:1.08rem;
}

.bullets{
  display:grid;
  gap:12px;
  margin:28px 0 34px;
}

.bullets li{
  position:relative;
  padding-left:34px;
  color:#d4d4da;
}

.bullets li::before{
  content:"🔥";
  position:absolute;
  left:0;
  top:-1px;
}

@media(max-width:900px){
  .comic-grid{
    grid-template-columns:1fr;
  }

  .comic-image{
    order:-1;
  }

  .comic-content{
    text-align:center;
  }

  .comic-content p{
    margin-inline:auto;
  }

  .comic-content .btn{
    width:100%;
    max-width:340px;
  }

  .bullets{
    max-width:420px;
    margin-inline:auto;
    text-align:left;
  }
}

/* ------------------------------
   LOCATIONS
------------------------------ */

.locations-section{
  background:var(--paper);
  color:#111;
}

.locations-section p{
  color:#55555f;
}

.filters{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:34px;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 22px;
  border:1px solid #d8d8df;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.chip:hover,
.chip[aria-pressed="true"]{
  background:#111;
  color:#fff;
  border-color:#111;
  transform:translateY(-1px);
}

.chip:focus-visible{
  outline:3px solid #111;
  outline-offset:3px;
}

.grid-loc{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}

.loc{
  position:relative;
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:26px 18px;
  overflow:hidden;
  border:1px solid #e5e5ec;
  border-radius:var(--radius);
  background:#fff;
  color:#111;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.055);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    opacity .28s ease;
}

.loc:hover{
  transform:translateY(-5px);
  border-color:rgba(207,16,32,.32);
  box-shadow:0 16px 38px rgba(0,0,0,.10);
}

.loc--hidden{
  display:none;
}

.loc__type{
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:5px 8px;
  border:1px solid #e7e7ee;
  border-radius:999px;
  background:#fafafa;
  color:#666671;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.loc__logo{
  width:auto;
  max-width:112px;
  height:54px;
  object-fit:contain;
  margin-bottom:12px;
  filter:grayscale(100%);
  opacity:.64;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}

.loc:hover .loc__logo{
  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.03);
}

.loc h3{
  color:#111;
  font-size:1.15rem;
  line-height:1.1;
}

.loc p{
  color:#666671;
  font-size:.88rem;
}

.loc__btn-maps{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:6px;
  padding:7px 11px;
  border-radius:999px;
  background:#f2f2f5;
  color:#111;
  font-size:.74rem;
  font-weight:800;
  transition:background .25s ease, color .25s ease;
}

.loc__btn-maps:hover{
  background:var(--brand);
  color:#fff;
}

@media(max-width:560px){
  .grid-loc{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .loc{
    min-height:168px;
    padding:22px 10px;
  }

  .loc__logo{
    max-width:86px;
    height:42px;
  }

  .loc h3{
    font-size:.98rem;
  }

  .loc p{
    font-size:.78rem;
  }
}

/* ------------------------------
   FOOTER
------------------------------ */

footer{
  background:#0b0b0d;
  color:#a9a9b0;
  padding-block:46px 34px;
  border-top:1px solid var(--border);
}

.footer__grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:22px;
}

.footer__grid p{
  color:#8d8d96;
  font-size:.9rem;
}

.social-links{
  display:flex;
  justify-content:center;
  gap:14px;
}

.social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid var(--border);
  border-radius:50%;
  background:rgba(255,255,255,.045);
  color:#fff;
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.social-btn svg{
  width:20px;
  height:20px;
  stroke-width:1.6;
}

.social-btn:hover{
  transform:translateY(-3px);
  background:var(--brand);
  border-color:var(--brand);
  box-shadow:var(--shadow-red);
}

.footer-logo-link{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease, filter .25s ease;
}

.footer-logo-link img{
  width:62px;
  opacity:.82;
  transition:opacity .25s ease;
}

.footer-logo-link:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 0 12px rgba(207,16,32,.6));
}

.footer-logo-link:hover img{
  opacity:1;
}

@media(max-width:720px){
  .footer__grid{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  .footer-logo-link{
    justify-self:center;
  }
}

/* ------------------------------
   MOBILE CTA
------------------------------ */

.mobile-cta{
  display:none;
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:900;
  padding:8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(11,11,13,.86);
  box-shadow:0 16px 40px rgba(0,0,0,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.mobile-cta .btn{
  width:100%;
}

@media(max-width:980px){
  .mobile-cta{
    display:block;
  }

  body{
    padding-bottom:82px;
  }
}

/* ------------------------------
   REVEAL HELPERS
------------------------------ */

.reveal,
.reveal-story{
  will-change:transform, opacity;
}

/* ------------------------------
   RESPONSIVE FINAL
------------------------------ */

@media(max-width:480px){
  :root{
    --container-padding:18px;
  }

  .display-text{
    font-size:clamp(3rem, 17vw, 4.6rem);
  }

  .section{
    padding-block:64px;
  }

  .section-head{
    margin-bottom:30px;
  }

  .btn{
    width:100%;
  }

  .partner-strip__inner{
    gap:18px;
  }

  .partner-strip img{
    max-height:30px;
    max-width:108px;
  }
}

/* ============================================================
   HEAT TRIP v4 - CLONED LETTERS / ORIGINAL PAGE SAFE
============================================================ */

.hero-product-card {
  position: relative;
  overflow: visible;
}

/* ------------------------------
   CLEANER X-MODE BUTTON
------------------------------ */

.heat-sticker {
  position: absolute;
  left: -20px;
  bottom: -60px;
  z-index: 30;
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 10px 12px 10px;
  min-width: 112px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(12, 10, 14, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f5f0ea;
  box-shadow:
    0 12px 34px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 22px rgba(255, 106, 0, 0.18);
  cursor: pointer;
  transform: rotate(7deg);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
  overflow: hidden;
}

.heat-sticker::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #ffd35a 0%, #ff7a00 52%, #ff3a00 100%);
  opacity: 0.95;
}

.heat-sticker:hover {
  transform: rotate(4deg) translateY(-2px);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    0 18px 46px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 30px rgba(255, 106, 0, 0.24);
}

.heat-sticker:active {
  transform: rotate(8deg) scale(0.98);
}

.heat-sticker:disabled {
  cursor: wait;
}

.heat-sticker__kicker {
  display: block;
  font-size: 0.56rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

.heat-sticker__title {
  display: block;
  margin-top: 4px;
  font-size: 1.2rem;
  line-height: 0.95;
  letter-spacing: -0.07em;
  font-weight: 900;
}

.heat-sticker__meta {
  display: block;
  margin-top: 5px;
  font-size: 0.55rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.74;
}

.heat-sticker-hint {
  position: absolute;
  right: 12px;
  top: calc(100% + 10px);
  z-index: 30;
  color: rgba(255,255,255,0.56);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
}

/* ------------------------------
   TRIP OVERLAY
------------------------------ */

.heat-trip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  overflow: hidden;
}

body.heat-trip-active .heat-trip-overlay {
  opacity: 1;
  visibility: visible;
}

.heat-trip-backlight {
  position: absolute;
  inset: -24%;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 181, 39, 0.22), transparent 17%),
    radial-gradient(circle at 80% 24%, rgba(255, 84, 0, 0.22), transparent 18%),
    radial-gradient(circle at 56% 64%, rgba(255, 0, 128, 0.16), transparent 20%),
    radial-gradient(circle at 30% 82%, rgba(255, 214, 0, 0.14), transparent 18%),
    radial-gradient(circle at 76% 74%, rgba(133, 0, 255, 0.14), transparent 18%),
    rgba(8, 4, 7, 0.18);
  filter: blur(42px) saturate(1.2);
  animation: heatBacklightFlow 2s linear infinite;
}

.heat-trip-glow {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(50px);
  opacity: 0.25;
}

.heat-trip-glow--1 {
  width: 36vw;
  height: 36vw;
  left: -6vw;
  top: 14vh;
  background: rgba(255, 180, 0, 0.42);
  animation: heatGlowMove1 3.2s ease-in-out infinite alternate;
}

.heat-trip-glow--2 {
  width: 32vw;
  height: 32vw;
  right: -4vw;
  top: 8vh;
  background: rgba(255, 54, 0, 0.32);
  animation: heatGlowMove2 2.8s ease-in-out infinite alternate;
}

.heat-trip-glow--3 {
  width: 30vw;
  height: 30vw;
  left: 38vw;
  bottom: -8vh;
  background: rgba(180, 0, 255, 0.22);
  animation: heatGlowMove3 3.4s ease-in-out infinite alternate;
}

.heat-trip-grain {
  position: absolute;
  inset: -8%;
  opacity: 0.14;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: screen;
  animation: heatGrainMove 0.14s steps(2) infinite;
}

/* ------------------------------
   LETTER CLONES
   Asta NU modifica textul real din pagina.
------------------------------ */

.heat-clone-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.heat-flying-char {
  position: fixed;
  left: 0;
  top: 0;
  display: inline-block;
  white-space: pre;
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform-origin: center center;
  color: inherit;
	z-index: 6;
  opacity: 1 !important;
}

/* Ascundem textul real doar in timpul efectului, fara sa schimbam layout-ul */
body.heat-trip-active .heat-real-hidden,
body.heat-trip-active .heat-real-hidden * {
  color: transparent !important;
  text-shadow: none !important;
}

/* ------------------------------
   ACTIVE PAGE CHAOS
------------------------------ */

body.heat-trip-active {
  overflow-x: hidden;
}

body.heat-trip-active .site-head,
body.heat-trip-active .hero,
body.heat-trip-active .section,
body.heat-trip-active .partner-strip,
body.heat-trip-active footer,
body.heat-trip-active .mobile-cta {
  animation: heatGlobalShake 0.095s steps(2) infinite;
}

body.heat-trip-active .hero,
body.heat-trip-active .section,
body.heat-trip-active .partner-strip,
body.heat-trip-active footer {
  animation:
    heatGlobalShake 0.095s steps(2) infinite,
    heatHueSweep 1.8s linear infinite;
}

body.heat-trip-active img {
  filter:
    saturate(1.42)
    contrast(1.08)
    hue-rotate(10deg)
    drop-shadow(0 0 14px rgba(255, 84, 0, 0.26));
}

body.heat-trip-active .hero-product-card,
body.heat-trip-active .product-card,
body.heat-trip-active .proof-card,
body.heat-trip-active .loc,
body.heat-trip-active .story-card,
body.heat-trip-active .comic-image,
body.heat-trip-active .comic-content {
  animation: heatFloatChaos 0.42s ease-in-out infinite alternate;
}

body.heat-trip-active .product-card:nth-child(2n),
body.heat-trip-active .proof-card:nth-child(2n),
body.heat-trip-active .loc:nth-child(2n) {
  animation-direction: alternate-reverse;
}

body.heat-trip-active .marquee__inner {
  animation-duration: 2.2s !important;
  filter: saturate(2) contrast(1.2);
}

/* Afterglow scurt, fara sa lase pagina stramba */
body.heat-trip-afterglow .hero-product-card,
body.heat-trip-afterglow .product-card,
body.heat-trip-afterglow .proof-card,
body.heat-trip-afterglow .loc {
  animation: heatSoftSettle 0.7s ease-out both;
}

/* ------------------------------
   KEYFRAMES
------------------------------ */

@keyframes heatBacklightFlow {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1);
    filter: blur(42px) hue-rotate(0deg) saturate(1.15);
  }

  50% {
    transform: translate3d(2%, 2%, 0) rotate(180deg) scale(1.08);
    filter: blur(56px) hue-rotate(62deg) saturate(1.35);
  }

  100% {
    transform: translate3d(-2%, -1%, 0) rotate(360deg) scale(1);
    filter: blur(42px) hue-rotate(0deg) saturate(1.15);
  }
}

@keyframes heatGlowMove1 {
  from {
    transform: translate(0,0) scale(1);
  }

  to {
    transform: translate(8vw,-2vh) scale(1.16);
  }
}

@keyframes heatGlowMove2 {
  from {
    transform: translate(0,0) scale(1);
  }

  to {
    transform: translate(-10vw,6vh) scale(1.18);
  }
}

@keyframes heatGlowMove3 {
  from {
    transform: translate(0,0) scale(1);
  }

  to {
    transform: translate(-4vw,-10vh) scale(1.14);
  }
}

@keyframes heatGrainMove {
  0% {
    transform: translate(0,0);
  }

  25% {
    transform: translate(-3px, 2px);
  }

  50% {
    transform: translate(3px, -2px);
  }

  75% {
    transform: translate(2px, 4px);
  }

  100% {
    transform: translate(0,0);
  }
}

@keyframes heatGlobalShake {
  0% {
    transform: translate(0,0) rotate(0deg);
  }

  25% {
    transform: translate(2px,-1px) rotate(0.12deg);
  }

  50% {
    transform: translate(-2px,2px) rotate(-0.12deg);
  }

  75% {
    transform: translate(1px,3px) rotate(0.08deg);
  }

  100% {
    transform: translate(0,0) rotate(0deg);
  }
}

@keyframes heatHueSweep {
  0% {
    filter: saturate(1.2) contrast(1.06) hue-rotate(0deg);
  }

  50% {
    filter: saturate(1.28) contrast(1.08) hue-rotate(16deg);
  }

  100% {
    filter: saturate(1.2) contrast(1.06) hue-rotate(0deg);
  }
}

@keyframes heatFloatChaos {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(-6px) rotate(0.8deg) scale(1.01);
  }
}

@keyframes heatSoftSettle {
  0% {
    transform: translateY(-4px) rotate(0.5deg);
    filter: saturate(1.18);
  }

  100% {
    transform: translateY(0) rotate(0deg);
    filter: none;
  }
}

/* ------------------------------
   RESPONSIVE
------------------------------ */

@media (max-width: 860px) {
  .heat-sticker {
	left: -10px;
    bottom: -30px;
    min-width: 80px;
    padding: 9px 10px 9px;
  }

  .heat-sticker__title {
    font-size: 1.06rem;
  }

  .heat-sticker-hint {
    font-size: 0.58rem;
   
  }
}

@media (max-width: 640px) {
  .heat-sticker {
    transform: rotate(5deg);
  }

  .heat-sticker:hover {
    transform: rotate(3deg) translateY(-1px);
  }
}

/* ------------------------------
   REDUCED MOTION
------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .heat-trip-backlight,
  .heat-trip-glow,
  .heat-trip-grain,
  body.heat-trip-active .site-head,
  body.heat-trip-active .hero,
  body.heat-trip-active .section,
  body.heat-trip-active .partner-strip,
  body.heat-trip-active footer,
  body.heat-trip-active .mobile-cta,
  body.heat-trip-active .hero-product-card,
  body.heat-trip-active .product-card,
  body.heat-trip-active .proof-card,
  body.heat-trip-active .loc,
  body.heat-trip-active .story-card,
  body.heat-trip-active .comic-image,
  body.heat-trip-active .comic-content,
  body.heat-trip-afterglow .hero-product-card,
  body.heat-trip-afterglow .product-card,
  body.heat-trip-afterglow .proof-card,
  body.heat-trip-afterglow .loc {
    animation: none !important;
  }

  .heat-flying-char {
    display: none;
  }

  body.heat-trip-active .heat-real-hidden,
  body.heat-trip-active .heat-real-hidden * {
    color: inherit !important;
  }
}
/* Titlul mare zboara cu literele reale, nu cu duplicate */
.heat-title-char {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity, filter;
  transform-origin: center center;
}

body.heat-trip-active .display-text {
  color: inherit !important;
}
.footer-middle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.footer-legal-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 16px;
  font-size:.82rem;
  font-weight:800;
}

.footer-legal-links a{
  color:inherit;
  opacity:.76;
  transition:opacity .2s ease, color .2s ease;
}

.footer-legal-links a:hover{
  opacity:1;
  color:#fff;
}

@media(max-width:720px){
  .footer-middle{
    order:3;
    width:100%;
  }

  .footer-legal-links{
    flex-direction:column;
    gap:8px;
    text-align:center;
  }
}