:root{
  --bg:#050708;
  --bg2:#080b0d;
  --panel:#0b0f12;
  --panel2:#0e1317;
  --line:#20272c;
  --line2:#293137;
  --red:#ff1422;
  --red-2:#ff3a46;
  --red-dark:#a6000c;
  --text:#fff;
  --muted:#aeb5ba;
  --max:1180px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:"Montserrat",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 15% 0%,rgba(255,20,34,.08),transparent 24%),
    radial-gradient(circle at 85% 10%,rgba(255,20,34,.04),transparent 20%),
    linear-gradient(180deg,var(--bg),#030405 62%,#050708);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
::selection{background:var(--red);color:#fff}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#050708}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--red-dark),var(--red));border-radius:999px;border:2px solid #050708}

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

/* HEADER */
.site-header{
  height:64px;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,9,11,.76);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(18px) saturate(120%);
  transition:.35s var(--ease);
}
.site-header.scrolled{
  background:rgba(6,9,11,.93);
  box-shadow:0 14px 40px rgba(0,0,0,.26);
}
.header-inner{height:64px;display:flex;align-items:center;gap:24px}
.header-logo{width:92px;flex:0 0 auto;overflow:hidden}
.header-logo img{
  width:92px;height:46px;object-fit:contain;
  transition:transform .35s var(--ease),filter .35s var(--ease);
}
.header-logo:hover img{transform:scale(1.04);filter:drop-shadow(0 0 16px rgba(255,20,34,.25))}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:30px;height:100%}
.main-nav a{
  height:100%;display:grid;place-items:center;position:relative;
  font-size:11px;font-weight:700;color:#f0f1f2;white-space:nowrap;
  transition:color .25s ease,transform .25s ease;
}
.main-nav a:hover,.main-nav a.active{color:var(--red);transform:translateY(-1px)}
.main-nav a:after{
  content:"";position:absolute;bottom:13px;left:50%;width:0;height:2px;
  transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--red),transparent);
  transition:width .3s var(--ease);box-shadow:0 0 12px rgba(255,20,34,.55)
}
.main-nav a:hover:after,.main-nav a.active:after{width:34px}
.header-actions{display:flex;align-items:center;gap:14px;margin-left:6px}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:6px;border:1px solid transparent;font-size:11px;font-weight:800;line-height:1;
  transition:transform .25s var(--ease),filter .25s ease,box-shadow .25s ease,border-color .25s ease;
  white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
}
.button:before{
  content:"";position:absolute;inset:-2px auto -2px -35%;width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease);z-index:-1;
}
.button:hover:before{left:120%}
.button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.button-red{
  background:linear-gradient(135deg,#a9000d 0%,#ff1422 55%,#ff3a46 100%);
  border-color:#ff2632;color:white;box-shadow:0 8px 24px rgba(255,20,34,.17)
}
.button-red:hover{box-shadow:0 14px 32px rgba(255,20,34,.28)}
.header-quote{height:42px;padding:0 17px}
.phone-block{display:flex;align-items:center;gap:8px;font-size:10px;color:#fff;white-space:nowrap}
.phone-block .phone-icon{color:var(--red);font-size:19px;filter:drop-shadow(0 0 10px rgba(255,20,34,.45))}
.phone-block strong,.phone-block small{display:block}
.phone-block strong{font-size:11px}
.phone-block small{margin-top:2px;color:#7f878d;font-size:8px;font-weight:500}
.mobile-toggle{display:none;margin-left:auto;background:none;color:#fff;border:0;font-size:25px;cursor:pointer}

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 33% 10%,rgba(179,0,14,.16),transparent 34%),
    linear-gradient(180deg,#020304,#040607 85%);
  border-bottom:1px solid var(--line)
}
.hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 0 55%,rgba(255,20,34,.035) 60%,transparent 66%);
  animation:heroSweep 8s linear infinite;
}
.hero-grid{
  display:grid;grid-template-columns:.78fr 1.42fr;align-items:center;
  min-height:440px;padding:0;position:relative;z-index:2;
}
.hero-left{
  margin-left:40px;display:flex;flex-direction:column;justify-content:center;
  padding:28px 28px 30px 0;min-width:0;
  animation:heroLeftIn .85s var(--ease) both;
}
.hero-brand{
  width:470px;max-width:100%;margin:0 auto 16px;mix-blend-mode:screen;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.22));
  animation:brandGlow 4.5s ease-in-out infinite alternate;
}
.trust-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 22px;font-size:10px;font-weight:600;color:#eef0f1}
.trust-list span{
  display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.2;text-align:left;
  opacity:0;transform:translateY(10px);animation:trustIn .6s var(--ease) forwards;
}
.trust-list span:nth-child(1){animation-delay:.25s}
.trust-list span:nth-child(2){animation-delay:.35s}
.trust-list span:nth-child(3){animation-delay:.45s}
.trust-list span:nth-child(4){animation-delay:.55s}
.trust-list b{color:var(--red);font-size:12px;filter:drop-shadow(0 0 7px rgba(255,20,34,.5))}
.hero-actions {
    display: flex;
    gap: 13px;
    justify-content: flex-start;
    margin-left: 90px;
}
.button-lg {
    min-height: 44px;
    padding: 0 18px;
    font-size: 8px;
}
.button-outline{background:rgba(8,11,13,.68);border-color:#4b555c;color:#fff;backdrop-filter:blur(8px)}
.button-outline:hover{border-color:#6f7a82;background:#0c1114;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.hero-right{
  width:100%;height:auto;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;isolation:isolate;
  animation:heroRightIn 1s .12s var(--ease) both;
}
.hero-right:after{
  content:"";position:absolute;width:72%;height:52%;left:50%;bottom:4%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,20,34,.12),transparent 68%);
  filter:blur(26px);z-index:-1;
}
.hero-right img{
  margin-left:60px;width:100%;height:auto;max-width:90%;display:block;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.48));
  transform-origin:center;
  animation:heroFloat 6s ease-in-out infinite;
  transition:transform .45s var(--ease),filter .45s ease;
}
.hero-right:hover img{transform:scale(1.018) translateY(-2px);filter:drop-shadow(0 30px 42px rgba(0,0,0,.58))}
.hero-right:before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,#020304 0%,rgba(2,3,4,.72) 9%,rgba(2,3,4,0) 34%)}

/* SERVICES */
.service-bar{background:linear-gradient(180deg,#0d1114,#090c0e);border-bottom:1px solid var(--line);position:relative}
.service-grid{display:grid;grid-template-columns:repeat(6,1fr);min-height:108px;align-items:center}
.service-item{
  text-align:center;position:relative;padding:18px 8px;
  transition:transform .28s var(--ease),background .28s ease;
}
.service-item:hover{transform:translateY(-5px);background:linear-gradient(180deg,rgba(255,20,34,.055),transparent)}
.service-item:not(:last-child):after{content:"";position:absolute;right:0;top:19px;bottom:19px;width:1px;background:linear-gradient(#4a1014,#a91b24,#4a1014)}
.service-item svg{display:block;width:33px;height:33px;margin:0 auto 5px;fill:none;stroke:var(--red);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;transition:.3s var(--ease);filter:drop-shadow(0 0 0 rgba(255,20,34,0))}
.service-item:hover svg{transform:translateY(-3px) scale(1.08);filter:drop-shadow(0 0 10px rgba(255,20,34,.38))}
.service-item h3{font-size:10px;margin:5px 0 0;min-height:24px;display:flex;align-items:center;justify-content:center}
.service-item i{display:block;width:22px;height:2px;background:var(--red);margin:5px auto 0;transition:width .3s var(--ease)}
.service-item:hover i{width:38px}

/* SECTIONS */
.section{padding:34px 0;border-bottom:1px solid var(--line);position:relative}
.eyebrow{margin:0 0 6px;color:var(--red);font-size:10px;font-weight:900;letter-spacing:3px}
.section h2{margin:0;font-size:25px;line-height:1.05;letter-spacing:.1px}
.section h2 span{color:var(--red)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:55px}
.about-copy h3{font-size:18px;letter-spacing:3px;line-height:1.18;font-weight:500;margin:10px 0 13px}
.body-copy{font-size:11px;line-height:1.7;color:#cbd0d3;max-width:545px;margin:0}
.mini-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.mini-benefits>div{display:flex;align-items:center;gap:8px;transition:transform .25s var(--ease)}
.mini-benefits>div:hover{transform:translateY(-3px)}
.benefit-icon{color:var(--red);font-size:22px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,20,34,.25))}
.mini-benefits b{font-size:8px;line-height:1.25}
.about-visual{border-radius:7px;overflow:hidden;border:1px solid #343a3f;box-shadow:var(--shadow);position:relative}
.about-visual:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.06);pointer-events:none}
.about-visual img{width:100%;aspect-ratio:2.16/1;object-fit:cover;transition:transform .7s var(--ease),filter .7s ease}
.about-visual:hover img{transform:scale(1.035);filter:contrast(1.04) saturate(1.06)}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:13px}
.text-link{font-size:9px;font-weight:600;color:#e7eaec;white-space:nowrap;position:relative}
.text-link b{color:var(--red);margin-left:6px;display:inline-block;transition:transform .25s var(--ease)}
.text-link:hover b{transform:translateX(4px)}
.project-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.project-card{
  position:relative;background:#0a0d0f;border:1px solid #272e33;border-radius:7px;
  overflow:hidden;min-width:0;box-shadow:0 8px 20px rgba(0,0,0,.12);
  transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
.project-card:hover{transform:translateY(-7px);border-color:#4d3438;box-shadow:0 20px 42px rgba(0,0,0,.32)}
.project-card img{width:100%;aspect-ratio:1.8/1;object-fit:cover;transition:transform .65s var(--ease),filter .65s ease}
.project-card:hover img{transform:scale(1.08);filter:brightness(1.06) saturate(1.08)}
.project-card>div{position:absolute;left:0;right:0;bottom:0;padding:26px 9px 8px;background:linear-gradient(transparent,rgba(0,0,0,.92));font-size:9px;transform:translateY(2px);transition:transform .3s var(--ease)}
.project-card:hover>div{transform:none}
.project-card b,.project-card small{display:block}
.project-card small{font-size:7px;color:#b7bec2;margin-top:2px}

.values-section{padding-top:24px;padding-bottom:26px}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.value-grid article{
  background:linear-gradient(145deg,#0e1215,#080b0d);border:1px solid #2a3237;border-radius:7px;
  padding:17px 18px;display:flex;align-items:flex-start;gap:14px;min-height:88px;
  transition:transform .3s var(--ease),border-color .3s ease,background .3s ease;
}
.value-grid article:hover{transform:translateY(-5px);border-color:#5a3034;background:linear-gradient(145deg,#13181c,#0a0d0f)}
.value-icon{font-size:31px;color:var(--red);line-height:1;transition:transform .3s var(--ease);filter:drop-shadow(0 0 10px rgba(255,20,34,.18))}
.value-grid article:hover .value-icon{transform:scale(1.08) rotate(-3deg)}
.value-grid h3{font-size:11px;margin:0 0 7px}.value-grid p{font-size:8px;line-height:1.45;color:#aeb5b9;margin:0}

/* CTA */
.quote-strip{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,#7f0009,#d70b18 44%,#ff1f2d 58%,#890009);
  background-size:180% 180%;animation:quoteFlow 9s ease infinite;
  border-top:1px solid #ed1724;border-bottom:1px solid #ed1724
}
.quote-strip:before{content:"";position:absolute;inset:0;opacity:.11;background-image:linear-gradient(135deg,transparent 0 45%,#fff 46% 47%,transparent 48% 100%);background-size:90px 90px;animation:patternMove 16s linear infinite}
.quote-inner{position:relative;z-index:1;min-height:110px;display:flex;justify-content:space-between;align-items:center;gap:34px}
.quote-title{display:flex;align-items:center;gap:18px}.doc-icon{font-size:46px;line-height:1;animation:docFloat 4s ease-in-out infinite}
.quote-title p{margin:0 0 5px;font-size:9px;font-weight:900;letter-spacing:3px}.quote-title h2{font-size:24px;margin:0}.quote-title span{display:block;margin-top:5px;font-size:9px}
.quote-cta{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:315px}.button-white{background:#fff;color:#d10b17;padding:13px 20px;font-size:10px;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.quote-points{display:flex;gap:13px;justify-content:center;font-size:7px;font-weight:700}.quote-points span:before{color:#fff}

/* REVIEWS */
.reviews-section{padding-top:24px;padding-bottom:22px}.reviews-head{align-items:center}.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.review-card{
  background:linear-gradient(145deg,#101417,#090c0e);border:1px solid #2c3439;border-radius:7px;
  padding:16px 18px;min-height:110px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
.review-card:before{content:"“";position:absolute;right:16px;top:-5px;font-size:70px;line-height:1;color:rgba(255,255,255,.025);font-family:Georgia,serif}
.review-card:hover{transform:translateY(-5px);border-color:#513136;box-shadow:0 16px 34px rgba(0,0,0,.22)}
.stars{color:#ffd100;font-size:13px;letter-spacing:2px;text-shadow:0 0 12px rgba(255,209,0,.12)}
.review-card p{font-size:9px;line-height:1.45;color:#e2e4e5;margin:8px 0 12px}.reviewer{display:flex;align-items:center;gap:9px}.avatar{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#d9dde0;color:#151719;font-size:8px;font-weight:900;transition:transform .25s var(--ease)}
.review-card:hover .avatar{transform:scale(1.08)}
.reviewer b,.reviewer small{display:block}.reviewer b{font-size:8px}.reviewer small{font-size:7px;color:#858d92;margin-top:3px}

/* FOOTER */
.footer{background:#060809;border-top:1px solid rgba(255,255,255,.04)}
.footer-main{min-height:76px;display:flex;align-items:center;gap:27px}.footer-logo img{width:82px;height:44px;object-fit:contain;transition:transform .3s var(--ease),filter .3s ease}.footer-logo:hover img{transform:scale(1.05);filter:drop-shadow(0 0 12px rgba(255,20,34,.2))}
.footer-nav{display:flex;gap:24px;margin-left:auto}.footer-nav a{font-size:8px;font-weight:700;transition:color .2s ease}.footer-nav a:hover,.footer-nav a.active{color:var(--red)}
.socials{display:flex;gap:16px;align-items:center}.socials a{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:10px;font-weight:800;transition:transform .25s var(--ease),background .25s ease,color .25s ease}.socials a:hover{transform:translateY(-3px);background:var(--red);color:#fff}
.footer-phone{padding-left:21px;border-left:1px solid #5b1116;display:flex;align-items:center;gap:9px}.footer-phone>span{color:var(--red);font-size:18px}.footer-phone b,.footer-phone small{display:block}.footer-phone b{font-size:10px}.footer-phone small{font-size:7px;color:#7f878c;margin-top:2px}
.footer-bottom{border-top:1px solid #1b2226;padding:13px 0 17px;color:#757e84;display:flex;justify-content:space-between;font-size:7px}

/* KEYFRAMES */
@keyframes heroLeftIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes heroRightIn{from{opacity:0;transform:translateX(28px) scale(.985)}to{opacity:1;transform:none}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes brandGlow{from{filter:drop-shadow(0 10px 28px rgba(0,0,0,.18))}to{filter:drop-shadow(0 12px 30px rgba(255,20,34,.10))}}
@keyframes trustIn{to{opacity:1;transform:none}}
@keyframes heroSweep{0%{transform:translateX(-35%)}100%{transform:translateX(35%)}}
@keyframes quoteFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes patternMove{from{background-position:0 0}to{background-position:180px 90px}}
@keyframes docFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* RESPONSIVE */
@media(max-width:1020px){
  .main-nav{gap:18px}.main-nav a{font-size:9px}.phone-block{display:none}.header-quote{padding:0 12px}
  .hero-brand{width:410px}.trust-list{grid-template-columns:1fr 1fr}.hero-grid{grid-template-columns:1.05fr .95fr}
  .hero-left{margin-left:0}.hero-right img{margin-left:20px;max-width:100%}
  .about-grid{gap:28px}.project-grid{grid-template-columns:repeat(3,1fr)}.project-card:nth-child(n+4){display:none}
  .footer-nav{display:none}.value-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .site-header,.header-inner{height:58px}.header-logo img{height:41px}.mobile-toggle{display:block}
  .main-nav{position:absolute;top:58px;left:0;right:0;background:rgba(8,11,13,.98);border-bottom:1px solid #222;display:none;flex-direction:column;gap:0;height:auto;padding:8px 20px 15px;backdrop-filter:blur(16px)}
  .main-nav.open{display:flex;animation:mobileMenuIn .25s var(--ease)}
  .main-nav a{width:100%;height:42px;display:flex;justify-content:flex-start}.main-nav a.active:after{bottom:4px}
  .header-actions{display:none}
  .hero-grid{grid-template-columns:1fr}.hero-left{padding:24px 0 20px;margin-left:0}.hero-brand{width:420px}.hero-right{height:auto;padding-bottom:10px}.hero-right img{margin-left:0;max-width:100%;animation:none}.hero-actions{justify-content:center}.trust-list{font-size:11px}
  .service-grid{grid-template-columns:repeat(3,1fr)}.service-item:nth-child(3):after{display:none}.service-item:nth-child(-n+3){border-bottom:1px solid #241015}
  .about-grid{grid-template-columns:1fr}.about-copy{text-align:center}.body-copy{margin-left:auto;margin-right:auto}.mini-benefits{max-width:520px;margin-left:auto;margin-right:auto}.about-visual{max-width:620px;margin:0 auto;width:100%}
  .project-grid{grid-template-columns:repeat(2,1fr)}.project-card:nth-child(n+5){display:none}.value-grid{grid-template-columns:1fr 1fr}.quote-inner{padding:22px 0;display:block;text-align:center}.quote-title{justify-content:center}.quote-cta{min-width:0;max-width:430px;margin:17px auto 0}.reviews-grid{grid-template-columns:1fr}.footer-main{flex-wrap:wrap;justify-content:center;padding:15px 0}.footer-phone{border:0;padding-left:0}.footer-bottom{gap:10px;flex-direction:column;text-align:center}
}

@media(max-width:480px){
  .container{width:min(calc(100% - 26px),var(--max))}.hero-brand{width:100%}.hero-actions{flex-direction:column}.button-lg{width:100%}.trust-list{grid-template-columns:1fr 1fr;gap:10px 8px}
  .service-grid{grid-template-columns:repeat(2,1fr)}.service-item:nth-child(3):after{display:block}.service-item:nth-child(even):after{display:none}
  .section h2{font-size:22px}.about-copy h3{font-size:15px}.mini-benefits{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:1fr}.project-card:nth-child(n+4){display:none}.value-grid{grid-template-columns:1fr}
  .quote-title{display:block}.doc-icon{margin-bottom:8px}.quote-title h2{font-size:20px}.quote-points{flex-wrap:wrap}.section-head{align-items:flex-start;flex-direction:column}.text-link{align-self:flex-end}.footer-logo{width:100%;display:flex;justify-content:center}.socials{order:3;width:100%;justify-content:center}
}

@keyframes mobileMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}


/* ==========================================================================
   M&M TOITURE — PREMIUM V3 / CINEMATIC
   Charge ce fichier APRÈS ton CSS principal.
   ========================================================================== */

:root{
  --v3-red:#ff1422;
  --v3-red-deep:#8e000a;
  --v3-orange:#ff6a00;
  --v3-gold:#ffc400;

  --v3-bg:#030405;
  --v3-bg-2:#06090b;
  --v3-panel:rgba(14,18,21,.72);
  --v3-panel-strong:rgba(11,14,17,.92);

  --v3-text:#fff;
  --v3-muted:#9da5aa;

  --v3-line:rgba(255,255,255,.075);
  --v3-line-red:rgba(255,20,34,.24);

  --v3-shadow:
      0 24px 70px rgba(0,0,0,.50),
      0 5px 18px rgba(0,0,0,.24);

  --v3-ease:cubic-bezier(.2,.75,.22,1);
  --v3-ease-spring:cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   GLOBAL
   ========================================================================== */

html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:#8e1119 #060708;
}

body{
  position:relative;
  overflow-x:hidden;
  background:
      radial-gradient(circle at 12% -10%,rgba(255,20,34,.12),transparent 28%),
      radial-gradient(circle at 94% 14%,rgba(255,106,0,.045),transparent 25%),
      linear-gradient(180deg,#020304 0%,#050708 54%,#030405 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;

  background:
      radial-gradient(
          circle at var(--v3-mouse-x,50%) var(--v3-mouse-y,25%),
          rgba(255,20,34,.075),
          transparent 18rem
      );

  transition:background .15s linear;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;

  opacity:.16;

  background-image:
      linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);

  background-size:36px 36px;

  mask-image:
      linear-gradient(
          to bottom,
          #000 0%,
          rgba(0,0,0,.72) 55%,
          transparent 100%
      );
}

::selection{
  color:#fff;
  background:rgba(255,20,34,.42);
}

/* subtle film grain */
#v3-noise{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  opacity:.026;
  mix-blend-mode:soft-light;

  background-image:
      repeating-radial-gradient(
          circle at 17% 32%,
          #fff 0 1px,
          transparent 1px 3px
      );

  background-size:7px 7px;
}

/* ==========================================================================
   LOADER
   ========================================================================== */

#v3-loader{
  position:fixed;
  inset:0;
  z-index:100000;

  display:grid;
  place-items:center;

  background:
      radial-gradient(circle at 50% 42%,rgba(255,20,34,.10),transparent 32%),
      #020304;

  transition:
      opacity .65s ease,
      visibility .65s ease;
}

#v3-loader.is-hidden{
  opacity:0;
  visibility:hidden;
}

.v3-loader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.v3-loader-mark{
  width:58px;
  height:58px;

  position:relative;

  border-radius:17px;

  background:
      linear-gradient(145deg,#17191c,#090b0d);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
      0 18px 50px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.05);
}

.v3-loader-mark::before{
  content:"";
  position:absolute;
  inset:8px;

  border-radius:12px;

  border:2px solid transparent;
  border-top-color:var(--v3-red);
  border-right-color:rgba(255,20,34,.22);

  animation:v3LoaderSpin .8s linear infinite;
}

.v3-loader-mark::after{
  content:"M";
  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  color:#fff;
  font-size:18px;
  font-weight:900;
}

.v3-loader-text{
  color:#aeb5b9;
  font-size:10px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
}

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */

#v3-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:99999;

  width:0;
  height:2px;

  pointer-events:none;

  background:
      linear-gradient(
          90deg,
          #7d0008,
          var(--v3-red),
          var(--v3-orange),
          var(--v3-gold)
      );

  box-shadow:
      0 0 13px rgba(255,20,34,.85);
}

/* ==========================================================================
   PARTICLES CANVAS
   ========================================================================== */

#v3-particles{
  position:fixed;
  inset:0;
  z-index:-2;

  width:100%;
  height:100%;

  pointer-events:none;

  opacity:.58;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{
  transition:
      height .35s var(--v3-ease),
      background .35s ease,
      border-color .35s ease,
      box-shadow .35s ease,
      transform .35s ease;
}

.site-header.v3-scrolled{
  background:rgba(4,6,8,.80);

  border-bottom-color:rgba(255,255,255,.08);

  box-shadow:
      0 12px 38px rgba(0,0,0,.38);

  backdrop-filter:blur(18px) saturate(1.2);
}

.header-logo{
  position:relative;
}

.header-logo::after{
  content:"";
  position:absolute;

  width:55px;
  height:20px;

  left:50%;
  bottom:-3px;

  transform:translateX(-50%);

  border-radius:50%;

  background:rgba(255,20,34,.14);

  filter:blur(15px);

  opacity:0;

  transition:opacity .35s ease;
}

.header-logo:hover::after{
  opacity:1;
}

.header-logo img{
  transition:
      transform .45s var(--v3-ease-spring),
      filter .45s ease;
}

.header-logo:hover img{
  transform:translateY(-2px) scale(1.045);

  filter:
      drop-shadow(0 0 13px rgba(255,20,34,.28));
}

.main-nav a{
  overflow:hidden;

  transition:
      color .25s ease,
      transform .25s ease;
}

.main-nav a::before{
  content:"";

  position:absolute;

  left:50%;
  bottom:9px;

  width:0;
  height:1px;

  transform:translateX(-50%);

  background:
      linear-gradient(
          90deg,
          transparent,
          var(--v3-red),
          transparent
      );

  transition:width .32s var(--v3-ease);
}

.main-nav a:hover{
  transform:translateY(-1px);
}

.main-nav a:hover::before{
  width:86%;
}

.main-nav a.active{
  text-shadow:
      0 0 14px rgba(255,20,34,.26);
}

/* ==========================================================================
   BUTTON SYSTEM
   ========================================================================== */

.button,
.site-link{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  transform:translateZ(0);

  transition:
      transform .28s var(--v3-ease-spring),
      filter .28s ease,
      box-shadow .28s ease,
      border-color .28s ease;
}

.button::before,
.site-link::before{
  content:"";

  position:absolute;

  top:-20%;
  bottom:-20%;
  left:-45%;

  width:28%;

  z-index:-1;

  transform:skewX(-18deg);

  background:
      linear-gradient(
          90deg,
          transparent,
          rgba(255,255,255,.28),
          transparent
      );

  transition:left .55s var(--v3-ease);
}

.button:hover::before,
.site-link:hover::before{
  left:120%;
}

.button:hover,
.site-link:hover{
  transform:translateY(-2px);
}

.button-red{
  background:
      linear-gradient(
          135deg,
          #840008 0%,
          #bf0914 42%,
          #ff1c2a 100%
      );

  border-color:rgba(255,80,90,.65);

  box-shadow:
      0 14px 32px rgba(255,20,34,.22),
      inset 0 1px 0 rgba(255,255,255,.13);
}

.button-red:hover{
  box-shadow:
      0 18px 48px rgba(255,20,34,.30),
      0 0 32px rgba(255,20,34,.11);
}

.button-outline{
  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.045),
          rgba(255,255,255,.015)
      );

  border-color:rgba(255,255,255,.17);

  backdrop-filter:blur(10px);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  background:
      radial-gradient(circle at 24% 27%,rgba(255,20,34,.105),transparent 29%),
      linear-gradient(135deg,#020304 0%,#050708 55%,#020304 100%);
}

.hero::before{
  content:"";

  position:absolute;
  inset:-38%;

  z-index:-3;

  pointer-events:none;

  background:
      conic-gradient(
          from 180deg at 50% 50%,
          transparent 0 31%,
          rgba(255,20,34,.075) 39%,
          transparent 46% 100%
      );

  animation:v3HeroAura 20s linear infinite;
}

.hero::after{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-190px;
  top:-220px;

  z-index:-2;

  border-radius:50%;

  background:
      rgba(255,20,34,.085);

  filter:blur(88px);

  animation:v3HeroOrb 8s ease-in-out infinite alternate;
}

.hero-grid{
  position:relative;
  gap:clamp(22px,2.8vw,54px);
}

.hero-left{
  position:relative;

  z-index:3;
}

.hero-left::before{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  left:-110px;
  top:50%;

  transform:translateY(-50%);

  z-index:-1;

  border-radius:50%;

  background:
      rgba(255,20,34,.05);

  filter:blur(55px);
}

.hero-brand{
  margin-left: 40px;
  position:relative;

  filter:
      drop-shadow(0 18px 40px rgba(0,0,0,.46))
      drop-shadow(0 0 25px rgba(255,20,34,.075));

  animation:
      v3BrandEnter .95s var(--v3-ease-spring) both;
}

.hero-brand::after{
  content:"";

  position:absolute;

  left:9%;
  right:9%;
  bottom:-9px;

  height:1px;

  opacity:.55;

  background:
      linear-gradient(
          90deg,
          transparent,
          rgba(255,20,34,.44),
          transparent
      );

  transform:scaleX(0);

  animation:
      v3BrandLine .9s .55s var(--v3-ease) forwards;
}

.trust-list{
  position:relative;

  z-index:2;
}

.trust-list span{
  position:relative;

  padding:10px 12px;

  border:
      1px solid rgba(255,255,255,.055);

  border-radius:11px;

  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.025),
          rgba(255,255,255,.008)
      );

  backdrop-filter:blur(9px);

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025);

  transition:
      transform .28s var(--v3-ease-spring),
      border-color .28s ease,
      background .28s ease,
      box-shadow .28s ease;
}

.trust-list span:hover{
  transform:translateY(-4px);

  border-color:rgba(255,20,34,.20);

  background:
      rgba(255,20,34,.035);

  box-shadow:
      0 10px 25px rgba(0,0,0,.22);
}

.hero-actions{
  animation:
      v3FadeUp .85s .2s var(--v3-ease) both;
}

.hero-right{
  position:relative;

  min-height:100%;

  isolation:isolate;

  overflow:hidden;

  border-left:
      1px solid rgba(255,255,255,.035);
}

.hero-right::after{
  content:"";

  position:absolute;

  inset:7% 4% 7% 5%;

  z-index:-1;

  border-radius:32px;

  background:
      rgba(255,20,34,.065);

  filter:blur(44px);
}

.hero-right img{
  position:relative;

  z-index:1;

  transform-origin:center;

  will-change:transform;

  transition:
      transform .7s var(--v3-ease),
      filter .7s ease;

  filter:
      saturate(1.055)
      contrast(1.045)
      drop-shadow(0 34px 60px rgba(0,0,0,.42));

  animation:
      v3ImageEnter 1.05s .06s var(--v3-ease-spring) both;
}

.hero-right:hover img{
  filter:
      saturate(1.11)
      contrast(1.07)
      drop-shadow(0 40px 72px rgba(0,0,0,.50));
}

/* Hero glass frame */
.v3-hero-frame{
  position:absolute;

  inset:7% 3.5% 7% 4%;

  z-index:2;

  pointer-events:none;

  border:
      1px solid rgba(255,255,255,.075);

  border-radius:22px;

  box-shadow:
      inset 0 0 0 1px rgba(255,20,34,.025),
      0 28px 70px rgba(0,0,0,.25);

  mask-image:
      linear-gradient(
          90deg,
          transparent 0 7%,
          #000 18% 100%
      );
}

/* ==========================================================================
   SERVICE BAR
   ========================================================================== */

.service-bar{
  position:relative;

  overflow:hidden;

  background:
      linear-gradient(
          180deg,
          rgba(17,21,24,.98),
          rgba(7,10,12,.98)
      );

  box-shadow:
      0 -12px 42px rgba(0,0,0,.32),
      0 20px 50px rgba(0,0,0,.18);
}

.service-bar::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
      linear-gradient(
          90deg,
          transparent,
          rgba(255,20,34,.045),
          transparent
      );

  transform:translateX(-120%);

  animation:v3Sweep 9s linear infinite;
}

.service-item{
  isolation:isolate;

  transition:
      transform .35s var(--v3-ease-spring);
}

.service-item::before{
  content:"";

  position:absolute;

  inset:7px;

  z-index:-1;

  opacity:0;

  border-radius:13px;

  background:
      linear-gradient(
          145deg,
          rgba(255,20,34,.075),
          rgba(255,255,255,.012)
      );

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03);

  transition:opacity .3s ease;
}

.service-item:hover{
  transform:translateY(-6px);
}

.service-item:hover::before{
  opacity:1;
}

.service-item svg{
  transition:
      transform .42s var(--v3-ease-spring),
      filter .32s ease;
}

.service-item:hover svg{
  transform:
      translateY(-4px)
      scale(1.09);

  filter:
      drop-shadow(0 0 12px rgba(255,20,34,.44));
}

/* ==========================================================================
   SECTION ATMOSPHERE
   ========================================================================== */

.section{
  position:relative;

  overflow:hidden;
}

.section::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
      radial-gradient(
          circle at 92% 10%,
          rgba(255,20,34,.032),
          transparent 22rem
      );
}

.section:nth-of-type(even)::before{
  background:
      radial-gradient(
          circle at 8% 50%,
          rgba(255,20,34,.025),
          transparent 24rem
      );
}

.eyebrow{
  position:relative;

  display:inline-block;

  text-shadow:
      0 0 18px rgba(255,20,34,.22);
}

.eyebrow::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-5px;

  width:28px;
  height:1px;

  background:
      linear-gradient(
          90deg,
          var(--v3-red),
          transparent
      );
}

.section h2{
  text-wrap:balance;
}

/* ==========================================================================
   REVEAL
   ========================================================================== */

.v3-reveal{
  opacity:0;

  transform:
      translateY(34px)
      scale(.988);

  filter:blur(5px);

  transition:
      opacity .8s var(--v3-ease),
      transform .8s var(--v3-ease-spring),
      filter .8s ease;
}

.v3-reveal.is-visible{
  opacity:1;

  transform:none;

  filter:none;
}

.v3-reveal[data-v3-delay="1"]{transition-delay:.05s}
.v3-reveal[data-v3-delay="2"]{transition-delay:.10s}
.v3-reveal[data-v3-delay="3"]{transition-delay:.15s}
.v3-reveal[data-v3-delay="4"]{transition-delay:.20s}
.v3-reveal[data-v3-delay="5"]{transition-delay:.25s}
.v3-reveal[data-v3-delay="6"]{transition-delay:.30s}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about-visual{
  position:relative;

  isolation:isolate;

  border:
      1px solid rgba(255,255,255,.105);

  border-radius:16px;

  box-shadow:var(--v3-shadow);

  transition:
      transform .5s var(--v3-ease-spring),
      border-color .35s ease,
      box-shadow .45s ease;
}

.about-visual::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;

  pointer-events:none;

  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.055),
          transparent 30%,
          rgba(255,20,34,.035)
      );
}

.about-visual::after{
  content:"";

  position:absolute;

  width:150px;
  height:150px;

  right:-45px;
  bottom:-70px;

  z-index:-1;

  border-radius:50%;

  background:
      rgba(255,20,34,.08);

  filter:blur(46px);
}

.about-visual:hover{
  transform:
      translateY(-7px)
      scale(1.01);

  border-color:
      rgba(255,20,34,.22);

  box-shadow:
      0 34px 88px rgba(0,0,0,.56);
}

.about-visual img{
  transition:
      transform .8s var(--v3-ease),
      filter .5s ease;
}

.about-visual:hover img{
  transform:scale(1.045);

  filter:
      saturate(1.09)
      contrast(1.05);
}

.mini-benefits>div{
  padding:10px;

  border-radius:11px;

  transition:
      background .25s ease,
      transform .25s var(--v3-ease);
}

.mini-benefits>div:hover{
  transform:translateY(-3px);

  background:
      rgba(255,255,255,.028);
}

/* ==========================================================================
   PROJECTS
   ========================================================================== */

.project-card{
  position:relative;

  isolation:isolate;

  border:
      1px solid rgba(255,255,255,.09);

  border-radius:16px;

  box-shadow:
      0 12px 32px rgba(0,0,0,.24);

  transform-style:preserve-3d;

  will-change:transform;

  transition:
      transform .42s var(--v3-ease-spring),
      border-color .35s ease,
      box-shadow .45s ease;
}

.project-card::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;

  pointer-events:none;

  opacity:0;

  background:
      radial-gradient(
          circle at var(--v3-card-x,50%) var(--v3-card-y,50%),
          rgba(255,255,255,.14),
          transparent 32%
      );

  transition:opacity .25s ease;
}

.project-card::after{
  content:"";

  position:absolute;

  inset:1px;

  z-index:2;

  pointer-events:none;

  border-radius:15px;

  box-shadow:
      inset 0 0 0 1px rgba(255,20,34,.02);
}

.project-card:hover{
  border-color:
      rgba(255,20,34,.27);

  box-shadow:
      0 28px 58px rgba(0,0,0,.46),
      0 0 35px rgba(255,20,34,.055);
}

.project-card:hover::before{
  opacity:1;
}

.project-card img{
  transition:
      transform .75s var(--v3-ease),
      filter .5s ease;
}

.project-card:hover img{
  transform:scale(1.08);

  filter:
      saturate(1.12)
      contrast(1.06);
}

.project-card>div{
  z-index:3;

  backdrop-filter:blur(2px);
}

/* project open icon */
.v3-project-open{
  position:absolute;

  top:10px;
  right:10px;

  z-index:4;

  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border:
      1px solid rgba(255,255,255,.10);

  border-radius:9px;

  color:#fff;

  font-size:13px;

  background:
      rgba(5,7,8,.58);

  backdrop-filter:blur(10px);

  opacity:0;

  transform:
      translateY(-5px)
      scale(.92);

  transition:
      opacity .28s ease,
      transform .28s var(--v3-ease-spring),
      background .28s ease;
}

.project-card:hover .v3-project-open{
  opacity:1;

  transform:none;
}

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

.value-grid article{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  border:
      1px solid rgba(255,255,255,.085);

  border-radius:15px;

  background:
      linear-gradient(
          145deg,
          rgba(19,24,28,.88),
          rgba(7,10,12,.96)
      );

  box-shadow:
      0 13px 34px rgba(0,0,0,.18);

  transition:
      transform .38s var(--v3-ease-spring),
      border-color .32s ease,
      box-shadow .4s ease;
}

.value-grid article::before{
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:3px;
  height:0;

  background:
      linear-gradient(
          var(--v3-red),
          var(--v3-orange)
      );

  transition:
      height .4s var(--v3-ease);
}

.value-grid article::after{
  content:"";

  position:absolute;

  width:100px;
  height:100px;

  right:-50px;
  bottom:-50px;

  z-index:-1;

  border-radius:50%;

  background:
      rgba(255,20,34,.07);

  filter:blur(30px);

  opacity:0;

  transition:opacity .35s ease;
}

.value-grid article:hover{
  transform:
      translateY(-7px);

  border-color:
      rgba(255,20,34,.23);

  box-shadow:
      0 24px 52px rgba(0,0,0,.33);
}

.value-grid article:hover::before{
  height:100%;
}

.value-grid article:hover::after{
  opacity:1;
}

.value-icon{
  transition:
      transform .38s var(--v3-ease-spring),
      filter .32s ease;
}

.value-grid article:hover .value-icon{
  transform:
      scale(1.13)
      rotate(-3deg);

  filter:
      drop-shadow(0 0 10px rgba(255,20,34,.38));
}

/* ==========================================================================
   QUOTE STRIP
   ========================================================================== */

.quote-strip{
  isolation:isolate;

  box-shadow:
      0 20px 55px rgba(132,0,10,.21),
      inset 0 1px 0 rgba(255,255,255,.10);
}

.quote-strip::after{
  content:"";

  position:absolute;

  top:-120%;
  left:-40%;

  width:27%;
  height:350%;

  transform:rotate(17deg);

  background:
      linear-gradient(
          90deg,
          transparent,
          rgba(255,255,255,.18),
          transparent
      );

  animation:
      v3QuoteShine 7s ease-in-out infinite;
}

.button-white{
  transition:
      transform .3s var(--v3-ease-spring),
      box-shadow .3s ease;
}

.button-white:hover{
  transform:
      translateY(-3px)
      scale(1.01);

  box-shadow:
      0 17px 36px rgba(0,0,0,.25);
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */

.review-card{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  border:
      1px solid rgba(255,255,255,.085);

  border-radius:15px;

  background:
      linear-gradient(
          145deg,
          rgba(17,22,25,.92),
          rgba(7,10,12,.98)
      );

  box-shadow:
      0 13px 32px rgba(0,0,0,.19);

  transition:
      transform .38s var(--v3-ease-spring),
      border-color .35s ease,
      box-shadow .4s ease;
}

.review-card::before{
  content:"“";

  position:absolute;

  right:13px;
  top:-17px;

  color:
      rgba(255,20,34,.075);

  font-family:
      Georgia,
      serif;

  font-size:85px;
  line-height:1;
}

.review-card::after{
  content:"";

  position:absolute;

  width:120px;
  height:120px;

  left:-70px;
  bottom:-70px;

  z-index:-1;

  border-radius:50%;

  background:
      rgba(255,20,34,.06);

  filter:blur(34px);
}

.review-card:hover{
  transform:translateY(-7px);

  border-color:
      rgba(255,20,34,.21);

  box-shadow:
      0 24px 52px rgba(0,0,0,.34);
}

.stars{
  text-shadow:
      0 0 11px rgba(255,209,0,.20);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{
  position:relative;

  overflow:hidden;

  border-top:
      1px solid rgba(255,255,255,.055);

  background:
      radial-gradient(circle at 10% 0%,rgba(255,20,34,.055),transparent 25rem),
      #040607;
}

.footer::before{
  content:"";

  position:absolute;

  width:320px;
  height:320px;

  right:-130px;
  bottom:-200px;

  border-radius:50%;

  background:
      rgba(255,20,34,.055);

  filter:blur(70px);
}

.footer-nav a{
  position:relative;

  transition:
      color .25s ease,
      transform .25s ease;
}

.footer-nav a:hover{
  color:#fff;

  transform:
      translateY(-2px);
}

.socials a{
  border:
      1px solid rgba(255,255,255,.085);

  background:
      rgba(255,255,255,.02);

  transition:
      transform .3s var(--v3-ease-spring),
      border-color .3s ease,
      background .3s ease,
      box-shadow .3s ease;
}

.socials a:hover{
  transform:
      translateY(-4px)
      scale(1.06);

  border-color:
      rgba(255,20,34,.29);

  background:
      rgba(255,20,34,.08);

  box-shadow:
      0 10px 25px rgba(0,0,0,.28);
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */

#v3-back-top{
  position:fixed;

  right:18px;
  bottom:18px;

  z-index:1000;

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:
      1px solid rgba(255,255,255,.105);

  border-radius:13px;

  color:#fff;

  background:
      rgba(10,13,15,.74);

  box-shadow:
      0 15px 36px rgba(0,0,0,.36);

  backdrop-filter:
      blur(15px)
      saturate(1.2);

  cursor:pointer;

  opacity:0;
  visibility:hidden;

  transform:
      translateY(14px)
      scale(.96);

  transition:
      opacity .3s ease,
      visibility .3s,
      transform .3s var(--v3-ease-spring),
      border-color .3s ease;
}

#v3-back-top.is-visible{
  opacity:1;
  visibility:visible;

  transform:none;
}

#v3-back-top:hover{
  transform:
      translateY(-4px);

  border-color:
      rgba(255,20,34,.30);
}

/* ==========================================================================
   RIPPLE
   ========================================================================== */

.v3-ripple{
  position:absolute;

  width:12px;
  height:12px;

  pointer-events:none;

  border-radius:50%;

  background:
      rgba(255,255,255,.30);

  transform:
      translate(-50%,-50%)
      scale(0);

  animation:
      v3Ripple .62s ease-out forwards;
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

#v3-lightbox{
  position:fixed;

  inset:0;

  z-index:99990;

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

  padding:30px;

  opacity:0;
  visibility:hidden;

  background:
      rgba(1,2,3,.88);

  backdrop-filter:
      blur(14px)
      saturate(.9);

  transition:
      opacity .35s ease,
      visibility .35s;
}

#v3-lightbox.is-open{
  opacity:1;
  visibility:visible;
}

.v3-lightbox-box{
  position:relative;

  width:min(1100px,100%);

  transform:
      translateY(20px)
      scale(.975);

  transition:
      transform .4s var(--v3-ease-spring);
}

#v3-lightbox.is-open .v3-lightbox-box{
  transform:none;
}

.v3-lightbox-image{
  width:100%;
  max-height:78vh;

  object-fit:contain;

  border:
      1px solid rgba(255,255,255,.10);

  border-radius:18px;

  background:#050607;

  box-shadow:
      0 35px 100px rgba(0,0,0,.72);
}

.v3-lightbox-caption{
  margin-top:13px;

  color:#d9dddf;

  font-size:12px;
  text-align:center;
}

.v3-lightbox-close{
  position:absolute;

  top:-15px;
  right:-15px;

  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:
      1px solid rgba(255,255,255,.12);

  border-radius:11px;

  color:#fff;

  background:
      rgba(10,12,14,.86);

  backdrop-filter:
      blur(12px);

  cursor:pointer;
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes v3LoaderSpin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes v3HeroAura{
  to{
    transform:rotate(360deg);
  }
}

@keyframes v3HeroOrb{
  from{
    transform:
      translate3d(0,0,0)
      scale(.92);
  }

  to{
    transform:
      translate3d(-55px,45px,0)
      scale(1.09);
  }
}

@keyframes v3BrandEnter{
  from{
    opacity:0;

    transform:
      translateY(28px)
      scale(.982);

    filter:blur(7px);
  }

  to{
    opacity:1;

    transform:none;

    filter:none;
  }
}

@keyframes v3BrandLine{
  to{
    transform:scaleX(1);
  }
}

@keyframes v3ImageEnter{
  from{
    opacity:0;

    transform:
      translateX(34px)
      scale(.98);

    filter:
      blur(7px)
      saturate(.85);
  }

  to{
    opacity:1;

    transform:none;

    filter:
      saturate(1.055)
      contrast(1.045)
      drop-shadow(0 34px 60px rgba(0,0,0,.42));
  }
}

@keyframes v3FadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

@keyframes v3Sweep{
  0%,72%{
    transform:translateX(-130%);
  }

  100%{
    transform:translateX(130%);
  }
}

@keyframes v3QuoteShine{
  0%,55%{
    left:-40%;
    opacity:0;
  }

  66%{
    opacity:1;
  }

  92%,100%{
    left:125%;
    opacity:0;
  }
}

@keyframes v3Ripple{
  to{
    transform:
      translate(-50%,-50%)
      scale(23);

    opacity:0;
  }
}

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

@media(max-width:1020px){
  .hero-grid{
    min-height:auto;
  }
}

@media(max-width:760px){

  #v3-particles{
    opacity:.30;
  }

  body::after{
    opacity:.10;
  }

  .hero-grid{
    min-height:0;
    gap:0;
  }

  .hero-left{
    margin-left:0 !important;
  }

  .hero-right{
    min-height:330px;

    border-left:0;
  }

  .hero-right img{
    margin-left:0 !important;

    max-width:100% !important;
  }

  .v3-hero-frame{
    inset:5% 2%;

    border-radius:16px;
  }

  .trust-list span{
    padding:8px;
  }

  .project-card:hover,
  .value-grid article:hover,
  .review-card:hover,
  .about-visual:hover{
    transform:none;
  }

  .v3-project-open{
    opacity:1;
    transform:none;
  }

  #v3-lightbox{
    padding:15px;
  }
}

@media(max-width:480px){
  .hero-right{
    min-height:255px;
  }

  #v3-back-top{
    right:12px;
    bottom:12px;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;

    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;

    transition-duration:.001ms !important;
  }
}