*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body{background:#fff;color:#222}

/* Prevent horizontal scroll */
html, body {
  margin:0;
  padding:0;
  overflow-x:hidden;
  font-family:'Inter', sans-serif;
}

html{
--edicho-red:#E31E24;
--edicho-black:#111111;
--edicho-gray:#F2F2F2;

--accent:#ff3e00;
--bg-light:#f8f9fa;
--text-dark:#1a1a1a;
--ease:cubic-bezier(.22,1,.36,1);
}

/* Right side always stays visible */
.nav-right{
  flex-shrink: 0;
  display:flex;
  align-items:center;
}

/* ************************* */
/* NAVBAR */
.top-navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 clamp(12px,4vw,30px);
  background:rgba(255,255,255,0.95);
  border-bottom:1px solid #e0e0e0;
  backdrop-filter: blur(8px);
  transition:all 0.4s ease;
  z-index:9999;
}

/* ON SCROLL – FLOATING BLOCK */
.top-navbar.scrolled{
  top:15px;
  left:15px;
  width:calc(100% - 30px);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  background:rgba(255,255,255,0.98);
}

/* LOGO */
.logo{
  height:42px;
  transition:0.3s;
}

.top-navbar{
  z-index: 9999;   /* very important */
}

.menu-icon{
  cursor:pointer;
}

/* ALIGN LOGO + TEXT */
/* Main Container */
/* ============================================================
   EDICHO NAVBAR DYNAMIC TEXT - ULTRA-SMALL DEVICE FIX
   ============================================================ */
.nav-left {
  display: flex;
  align-items: center;
  flex: 0 1 auto; 
  min-width: 0;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(2px, 1.5vw, 8px); 
  text-decoration: none;
  min-width: 0;
}

.logo {
  height: clamp(22px, 4vw, 28px); 
  width: auto;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: clamp(12.5px, 3.5vw, 18px);
  font-weight: 800;
  color: #1A1A1A;
  white-space: nowrap;
  line-height: 1;
  min-width: 0;
}

.brand-name {
  text-transform: uppercase;
}

.suffix-window {
  position: relative;
  height: 1.2em;
  overflow: hidden;
  margin-left: 2px;
  display: inline-block;
  min-width: clamp(50px, 12vw, 72px);
}

.suffix-text {
  display: block;
  color: #E31E24;
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.6s ease;
  will-change: transform, opacity;
}

/* Animation states */
.suffix-text.exit {
  transform: translateY(-100%);
  opacity: 0;
}

.suffix-text.prepare {
  transition: none;
  transform: translateY(100%);
  opacity: 0;
}

/* ============================================================
   FIX FOR SMALL DEVICES (< 375px)
   ============================================================ */

@media (max-width: 375px) {
  .top-navbar{
    height:60px;
  }

  .logo{
    height:22px;
  }

  .brand-text{
    font-size:13px;
  }

  .suffix-window{
    min-width:50px;
  }

  .menu-icon{
    font-size:24px;
  }
}

@media (max-width: 325px) {
  .brand{
    gap:3px;
  }

  .brand-text{
    font-size:12px;
  }

  .suffix-window{
    display:none; /* prevents overflow */
  }

  .menu-icon{
    font-size:22px;
  }
}

/* Animation states remain the same */
.suffix-text.exit { transform: translateY(-100%); opacity: 0; }
.suffix-text.prepare { transition: none; transform: translateY(100%); opacity: 0; }

/* MENU ICON */
.menu-icon{
  font-size:28px;
  cursor:pointer;
  color:#111;
  transition:0.3s;
}

.menu-icon:hover{
  color:#d32f2f;
  transform:rotate(90deg) scale(1.1);
}

/* SIDE MENU (RIGHT SLIDE MENU) */
.side-menu{
  position: fixed;
  top: 0;
  right: -100%;
  width: min(260px, 80%);
  height: 100vh;
  background: #111;
  padding-top: 120px;
  transition: right 0.4s ease;
  z-index: 9998;
}

.side-menu a{
  display: block;
  padding: 15px 30px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  transition: 0.3s;
}

.side-menu a:hover{
  background: #d32f2f;
  padding-left: 40px;
}

/* OVERLAY */
.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index:9997;
}

/* show overlay */
.menu-overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* MENU ICON ACTIVE (☰ → ✖) */
.menu-icon.active{
  color:#d32f2f;
  transform:rotate(90deg) scale(1.1);
}

/* smooth transition for icon text change */
.menu-icon{
  transition:0.3s ease;
}

/* ************************* */

/* Hero section */

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

.edicho-hero{
position:relative;
width:100%;
height:100vh;
background:var(--edicho-gray);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
}

/* =================================
BACKGROUND
================================= */

.hero-bg-container{
position:absolute;
inset:0;
filter:grayscale(100%) contrast(1.1);
opacity:.25;
}

.hero-bg{
width:100%;
height:100%;
object-fit:cover;
animation:heroFloat 12s ease-in-out infinite;
}

.hero-overlay{
position:absolute;
inset:0;
background:radial-gradient(circle,
rgba(242,242,242,.4) 0%,
rgba(242,242,242,1) 85%);
}

/* subtle cinematic grain */

.hero-grain{
position:absolute;
inset:0;
background-image:url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Grain_Noise.jpg");
opacity:.04;
pointer-events:none;
mix-blend-mode:overlay;
}

/* =================================
CONTENT
================================= */

.hero-content{
position:relative;
z-index:10;
padding:clamp(80px,12vh,160px) 20px 0;
max-width:900px;
margin:auto;
display:flex;
flex-direction:column;
align-items:center;
}

/* =================================
TAG
================================= */

.hero-tag{
font-size:10px;
letter-spacing:4px;
color:#888;
margin-bottom:24px;
font-weight:700;
opacity:0;
transform:translateY(30px);
animation:heroReveal 1s ease forwards .3s;
}

.hero-tag { animation-delay: 0.3s; }
.hero-sub { animation-delay: 0.9s; }

.hero-tag{
animation:heroReveal .9s cubic-bezier(.22,1,.36,1) forwards;
animation-delay:.2s;
}

.hero-sub{
animation:heroReveal .9s cubic-bezier(.22,1,.36,1) forwards;
animation-delay:1.6s;
}

/* =================================
TITLE
================================= */

.hero-title{
font-size:clamp(24px,7.5vw,92px);
font-weight:900;
line-height:.95;
letter-spacing:-2px;
text-transform:uppercase;
color:var(--edicho-black);
max-width:1000px;
opacity:0;
transform:translateY(30px);
animation:heroReveal 1s ease forwards .6s;
}

/* =================================
COMMAND WORD
================================= */

.command-wrapper{
color:var(--edicho-red);
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
position:relative;
overflow:hidden;

/* FIXED HEIGHT FOR ALL DEVICES */
height:1.2em;
min-width:220px;

/* prevents layout jump */
white-space:nowrap;
}

#dynamicCommand{
display:inline-block;
position:relative;
font-weight:900;
letter-spacing:2px;

color:var(--edicho-red);

/* background removed */
background:none;

padding:0;

transition:
transform .7s cubic-bezier(.76,0,.24,1),
opacity .7s ease,
filter .7s ease,
letter-spacing .7s ease;
}

/* underline energy bar */

#dynamicCommand::after{
content:"";
position:absolute;
left:0;
bottom:-6px;

width:100%;
height:3px;

background:linear-gradient(
90deg,
transparent,
#E31E24,
transparent
);

transform:scaleX(.2);
opacity:.6;

transition:
transform .6s cubic-bezier(.22,1,.36,1),
opacity .6s ease;
}

.word-active::after{
transform:scaleX(1);
opacity:1;
}

/* exit animation */

.word-exit{
transform:translateY(-120%);
opacity:0;
filter:blur(10px);
letter-spacing:4px;
}

/* enter animation */

.word-enter{
transform:translateY(120%);
opacity:0;
filter:blur(10px);
}

/* active */

.word-active{
transform:translateY(0);
opacity:1;
filter:blur(0);
animation:commandPulse 2.8s ease-in-out infinite;
}

/* glow pulse */

@keyframes commandPulse{

0%{
text-shadow:0 0 0 rgba(227,30,36,0);
transform:scale(1);
}

40%{
text-shadow:
0 0 18px rgba(227,30,36,.35),
0 0 35px rgba(227,30,36,.15);
}

60%{
transform:scale(1.05);
}

100%{
text-shadow:0 0 0 rgba(227,30,36,0);
transform:scale(1);
}

}

/* =================================
SUBTEXT
================================= */

.hero-sub{
margin-top:25px;
font-size:clamp(14px,1.1vw,18px);
line-height:1.6;
color:#555;
max-width:580px;
margin-left:auto;
margin-right:auto;
opacity:0;
transform:translateY(30px);
animation:heroReveal 1s ease forwards .9s;
}

/* =================================
SCROLL INDICATOR
================================= */

.scroll-wrapper{
position:relative;
margin-top:clamp(40px,6vh,80px);
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;

/* bigger button */
padding:20px 44px;

border-radius:50px;
background:#ffffff;
border:1px solid rgba(0,0,0,.08);

box-shadow:
0 12px 28px rgba(0,0,0,.08),
0 4px 10px rgba(0,0,0,.04);

transition:
transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease,
background .35s ease;
}

.scroll-line{
width:1px;
height:50px;
background:rgba(0,0,0,.1);
position:relative;
overflow:hidden;
}

.scroll-line::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:var(--edicho-red);
animation:scrollLineMove 2s infinite cubic-bezier(.65,0,.35,1);
}

.scroll-text{
font-size:clamp(11px,0.9vw,14px);
font-weight:900;
letter-spacing:3px;
color:#111111;
transition:letter-spacing .35s ease,color .35s ease;
}

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

.hero-footer-info{
position:absolute;
bottom:30px;
font-size:clamp(8px,1vw,10px);
letter-spacing:2px;
color:#bbb;
font-weight:700;
}

/* =================================
ANIMATIONS
================================= */

@keyframes heroReveal{
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes heroFloat{
0%,100%{transform:scale(1.05) translateY(0)}
50%{transform:scale(1.1) translateY(-10px)}
}

@keyframes scrollPulse{
0%,100%{transform:translateY(0)}
50%{transform:translateY(8px)}
}

@keyframes scrollLineMove{
0%{transform:translateY(-100%)}
100%{transform:translateY(100%)}
}

/* =================================
TABLET
================================= */

@media (max-width:768px){

.hero-content{
padding-top:100px;
}

.hero-title{
font-size:clamp(32px,10vw,60px);
}

.hero-sub{
font-size:15px;
}

}

/* =================================
ULTRA SMALL
================================= */

@media (max-width:325px){

.hero-title{
font-size:30px;
letter-spacing:-1px;
}

.hero-sub{
font-size:13px;
padding:0 10px;
}

.scroll-line{
height:35px;
}

}

/* =================================
TITLE LINE ANIMATION
================================= */

.title-line{
display:block;
opacity:0;
transform:translateY(80px) scale(.96);
filter:blur(10px);
animation:titleReveal 1.1s cubic-bezier(.22,1,.36,1) forwards;
}

.title-line:nth-child(1){ animation-delay:.4s; }
.title-line:nth-child(2){ animation-delay:.8s; }
.title-line:nth-child(3){ animation-delay:1.2s; }

@keyframes titleReveal{
0%{
opacity:0;
transform:translateY(80px) scale(.96);
filter:blur(10px);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
}

.hero-title{
text-shadow:0 0 0 rgba(227,30,36,0);
animation:heroReveal 1s ease forwards .6s,
heroGlow 4s ease-in-out 2s infinite;
}

@keyframes heroGlow{
0%{ text-shadow:0 0 0 rgba(227,30,36,0); }
50%{ text-shadow:0 0 30px rgba(227,30,36,.15); }
100%{ text-shadow:0 0 0 rgba(227,30,36,0); }
}

/* =================================
SCROLL CTA ENHANCEMENT
================================= */

.scroll-wrapper{
position:relative;
transition:transform .35s cubic-bezier(.22,1,.36,1),
opacity .35s ease;
}

/* hover feedback */

.scroll-wrapper:hover{
transform:translateY(-4px);
}

/* glow attractor ring */

.scroll-wrapper::before{
  display:none;
content:"";
position:absolute;
inset:-18px;
border-radius:50px;
background:radial-gradient(
rgba(227,30,36,.18),
transparent 70%
);
opacity:0;
transform:scale(.7);
transition:all .45s ease;
pointer-events:none;
}

.scroll-wrapper:hover::before{
opacity:1;
transform:scale(1);
}

/* pulse hint to attract clicks */

.scroll-wrapper::after{
  display:none;
content:"";
position:absolute;
inset:-10px;
border-radius:40px;
border:1px solid rgba(227,30,36,.25);
opacity:.6;
animation:ctaPulse 2.4s ease-in-out infinite;
pointer-events:none;
}

@keyframes ctaPulse{
0%{
transform:scale(.9);
opacity:.6;
}
70%{
transform:scale(1.15);
opacity:0;
}
100%{
opacity:0;
}
}

/* text micro animation */

.scroll-text{
transition:letter-spacing .35s ease,
color .35s ease;
}

.scroll-wrapper:hover .scroll-text{
letter-spacing:4px;
color:#E31E24;
}

/* animated arrow hint */

.scroll-line::before{
content:"";
position:absolute;
bottom:-10px;
left:-2px;
width:5px;
height:5px;
border-right:2px solid #E31E24;
border-bottom:2px solid #E31E24;
transform:rotate(45deg);
opacity:.8;
animation:arrowBounce 1.8s infinite;
}

@keyframes arrowBounce{
0%,100%{transform:translateY(0) rotate(45deg)}
50%{transform:translateY(6px) rotate(45deg)}
}

/* ================================
PREMIUM CTA BUTTON
================================ */

.scroll-wrapper{
position:relative;
padding:16px 28px;
border-radius:40px;
background:rgba(255,255,255,0.75);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(0,0,0,0.08);
box-shadow:
0 10px 25px rgba(0,0,0,0.08),
0 2px 6px rgba(0,0,0,0.04);
transition:
transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease,
background .35s ease;
}

/* hover lift */

.scroll-wrapper:hover{
transform:translateY(-6px) scale(1.03);
background:#fff;
box-shadow:
0 20px 45px rgba(0,0,0,0.15),
0 10px 20px rgba(0,0,0,0.08);
}

/* glow attractor */

.scroll-wrapper::before{
content:"";
position:absolute;
inset:-20px;
border-radius:50px;
background:radial-gradient(
rgba(227,30,36,.25),
transparent 70%
);
opacity:.7;
animation:ctaGlow 2.6s ease-in-out infinite;
pointer-events:none;
}

@keyframes ctaGlow{
0%,100%{transform:scale(.9);opacity:.4}
50%{transform:scale(1.1);opacity:.8}
}

/* arrow hint */

.scroll-line{
display:none;
}

/* animated arrow */

.scroll-wrapper::after{
content:"";
position:absolute;
right:18px;
top:50%;
width:8px;
height:8px;
border-right:2px solid #E31E24;
border-bottom:2px solid #E31E24;
transform:translateY(-50%) rotate(45deg);
animation:arrowMove 1.5s infinite;
}

@keyframes arrowMove{
0%{transform:translateY(-50%) translateX(0) rotate(45deg)}
50%{transform:translateY(-50%) translateX(6px) rotate(45deg)}
100%{transform:translateY(-50%) translateX(0) rotate(45deg)}
}

/* text hover feedback */

.scroll-text{
transition:letter-spacing .35s ease,color .35s ease;
}

.scroll-wrapper:hover .scroll-text{
letter-spacing:4px;
color:#E31E24;
}

/* ===============================
PREMIUM HERO CTA
=============================== */

.scroll-wrapper{
position:relative;
margin-top:clamp(40px,6vh,80px);
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:50px;
background:#ffffff;
border:1px solid rgba(0,0,0,.08);

box-shadow:
0 12px 28px rgba(0,0,0,.08),
0 4px 10px rgba(0,0,0,.04);

transition:
transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease,
background .35s ease;
}

/* glow attractor */

.scroll-wrapper::before{
content:"";
position:absolute;
inset:-18px;
border-radius:60px;

background:radial-gradient(
rgba(227,30,36,.25),
transparent 70%
);

opacity:.6;
animation:ctaAura 2.6s ease-in-out infinite;
pointer-events:none;
}

@keyframes ctaAura{
0%,100%{
transform:scale(.9);
opacity:.4;
}
50%{
transform:scale(1.1);
opacity:.8;
}
}

/* hover lift */

.scroll-wrapper:hover{
transform:translateY(-6px) scale(1.03);

box-shadow:
0 25px 50px rgba(0,0,0,.18),
0 10px 20px rgba(0,0,0,.08);
}

/* inner layout */

.cta-inner{
display:flex;
align-items:center;
gap:14px;
}

/* text */

.scroll-text{
font-size:11px;
font-weight:800;
letter-spacing:3px;
color:#111111;
transition:letter-spacing .35s ease,color .35s ease;
}

/* hover text */

.scroll-wrapper:hover .scroll-text{
letter-spacing:4px;
color:#E31E24;
}

/* animated arrow */

.cta-arrow{
width:12px;
height:12px;
border-right:2px solid #E31E24;
border-bottom:2px solid #E31E24;
transform:rotate(45deg);
animation:arrowMove 1.4s infinite;
}

/* arrow motion */

@keyframes arrowMove{

0%{
transform:translateX(0) rotate(45deg);
}

50%{
transform:translateX(6px) rotate(45deg);
}

100%{
transform:translateX(0) rotate(45deg);
}

}

@media (max-width:600px){

.command-wrapper{

min-width:160px;
height:1.2em;
}

#dynamicCommand{
font-size:1em;
letter-spacing:1px;
}

}

@media (max-width:380px){

.command-wrapper{

min-width:140px;
}

#dynamicCommand{

font-size:.9em;
letter-spacing:.5px;

}

}

/* ************************* */

/* EDICHO OVERVIEW VIDEO SECTION */
:root {
  --accent: #ff3e00;
  --bg-light: #f8f9fa;
  --text-dark: #1a1a1a;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ===============================
WRAPPER (SCROLL CONTROL)
=============================== */

.expansion-wrapper {
  background: #ffffff;
  view-timeline-name: --expand-timeline;
}

/* ===============================
STICKY CONTAINER
=============================== */

.expansion-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
BACKGROUND FADE
=============================== */

.bg-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-light);
  opacity: 0;
  animation: bgFade linear both;
  animation-timeline: --expand-timeline;
  animation-range: entry 5% contain 40%;
}

@keyframes bgFade {
  to { opacity: 1; }
}

/* ===============================
GRAIN EFFECT
=============================== */

.grain {
  position: absolute;
  inset: 0;
  background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
  opacity: .025;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}

/* ===============================
VIDEO CAPSULE (MAIN HERO)
=============================== */

.video-capsule {
  position: relative;
  width: 80vw;
  height: 60vh;
  border-radius: 60px;
  overflow: hidden;
  z-index: 5;

  box-shadow:
    0 80px 100px -40px rgba(0,0,0,0.08),
    0 20px 40px rgba(0,0,0,0.04);

  transform: translateZ(0);

  animation: expandCinema linear both;
  animation-timeline: --expand-timeline;
  animation-range: entry 10% contain 85%;
}

/* fallback */
@supports not (animation-timeline: auto) {
  .video-capsule {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

@keyframes expandCinema {
  to {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ===============================
VIDEO
=============================== */

.showcase-video {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.25);
  filter: brightness(1.05);

  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);

  animation: videoZoom linear both;
  animation-timeline: --expand-timeline;
  animation-range: entry 5% contain 85%;
}

@keyframes videoZoom {
  to { transform: scale(1); }
}

/* ===============================
OVERLAY LIGHT EFFECT
=============================== */

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0) 60%
  );
  z-index: 4;
}

/* ===============================
CONTENT (TEXT REVEAL)
=============================== */

.content-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;

  opacity: 0;
  transform: translateY(40px);

  animation: contentReveal linear both;
  animation-timeline: --expand-timeline;
  animation-range: contain 65% contain 95%;
}

@keyframes contentReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
GLASS CARD
=============================== */

.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  border: 1px solid rgba(255, 255, 255, 0.4);

  padding: 3.5rem 5rem;
  border-radius: 32px;

  text-align: center;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.08),
    inset 0 1px rgba(255,255,255,0.6);
}

/* ===============================
TEXT
=============================== */

.hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  font-weight: 900;
  color: var(--text-dark);
  margin-top: 12px;
}

.outline {
  -webkit-text-stroke: 1.5px var(--text-dark);
  color: transparent;
}

/* ===============================
VIDEO CONTROLS
=============================== */

.video-controls {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: flex;
  gap: 16px;
  z-index: 100;

  opacity: 0;
  transition: opacity .4s ease;
}

.video-capsule:hover .video-controls {
  opacity: 1;
}

/* ===============================
BUTTONS
=============================== */

.control-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;

  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.6);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: #1a1a1a;
  cursor: pointer;

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

  transition:
    transform .35s var(--ease),
    box-shadow .35s ease,
    background .35s ease;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.control-btn svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

.control-btn:hover {
  background: #ffffff;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  color: var(--accent);
}

.control-btn:hover svg {
  transform: scale(1.1);
}

.control-btn:active {
  transform: scale(0.95);
}

/* ===============================
ICON SWITCHING
=============================== */

.control-btn .play-icon,
.control-btn .mute-icon {
  display: none;
}

.control-btn.is-paused .play-icon { display: block; }
.control-btn.is-paused .pause-icon { display: none; }

.control-btn.is-muted .mute-icon { display: block; }
.control-btn.is-muted .unmute-icon { display: none; }

/* ************************* */

/* Partner company STYLE SECTION */
.elite-marquee {
  background: #FDFDFD;
  padding: 100px 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.title {
  font-family: serif;
  font-size: clamp(30px, 5vw, 60px);
  font-weight: 800;
  margin-bottom: 60px;
}

.title span { color: #E31E24; }

/* --- MARQUEE ENGINE --- */
.marquee-container {
  position: relative;
  width: 100%;
}

.marquee-wrap {
  overflow: hidden;
  /* FIX: Added padding taaki hover animation cut na ho */
  padding: 40px 0; 
  cursor: pointer;
}

.track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: marqueeMove 35s linear infinite;
}

/* FIX: Animation stops ONLY when hovering over the marquee area */
.marquee-wrap:hover .track {
  animation-play-state: paused;
}

@keyframes marqueeMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- PILL DESIGN --- */
.pill {
  position: relative;
  padding: 16px 28px;
  background: #fff;
  border-radius: 100px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 5px 20px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  /* Default State: Desaturated */
  filter: grayscale(100%);
  opacity: 0.6;
}

.pill img {
  height: 50px;
  width: auto;
  pointer-events: none; /* Smooth hover detection */
}

/* HOVER EFFECT */
.pill:hover {
  transform: translateY(-12px); /* Ab ye cut nahi hoga */
  filter: grayscale(0%);
  opacity: 1;
  box-shadow: 0 15px 30px rgba(227, 30, 36, 0.15);
  border-color: rgba(227, 30, 36, 0.3);
}

/* CENTER EFFECT (Kinetic) */
.pill.active {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
  border-color: #E31E24;
}

/* Red Pulse Animation for Center Item */
.pill.active::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  border: 2px solid #E31E24;
  animation: pulseEffect 1.5s infinite;
}

@keyframes pulseEffect {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Edge Fading Overlays */
.fade-overlay {
  position: absolute;
  top: 0; bottom: 0; width: 15%; z-index: 10; pointer-events: none;
}
.left { left: 0; background: linear-gradient(to right, #FDFDFD, transparent); }
.right { right: 0; background: linear-gradient(to left, #FDFDFD, transparent); }


/* ************************* */

/* ABOUT STYLE SECTION */
/* ABOUT STYLE SECTION */
.about-style{
  padding:100px 6%;
  background:linear-gradient(135deg,#f6efe7,#ffffff);
  position:relative;
  overflow:hidden;
}

/* Decorative shapes (light, not disturbing) */
.about-style::before{
  content:"";
  position:absolute;
  top:15%;
  left:-120px;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(211,47,47,0.12), transparent 70%);
  border-radius:50%;
}
.about-style::after{
  content:"";
  position:absolute;
  bottom:15%;
  right:-120px;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(255,176,137,0.25), transparent 70%);
  border-radius:50%;
}

/* MAIN CONTAINER */
.about-wrapper{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* LEFT */
.about-left h2{
  font-family:"Playfair Display", serif;
  font-size:clamp(40px,4vw,56px);
  line-height:1.1;
  margin-bottom:20px;
}

.accent{
  position:relative;
}

.accent::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:60%;
  height:3px;
  background:#d32f2f;
}

.small-text{
  max-width:360px;
  font-size:14px;
  line-height:1.7;
  color:#333;
}

/* Quote */
.about-quote{
  margin-top:18px;
  padding-left:16px;
  border-left:4px solid #d32f2f;
  font-style:italic;
  max-width:360px;
  color:#222;
}

/* Button */
.about-btn{
  display:inline-block;
  margin-top:20px;
  padding:10px 22px;
  background:#d32f2f;
  color:#fff;
  border-radius:20px;
  text-decoration:none;
  transition:0.3s;
}
.about-btn:hover{
  background:#111;
}

/* Highlight */
.highlight{
  color:#d32f2f;
  font-weight:600;
}

/* RIGHT */
.about-right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.about-desc{
  font-size:15px;
  line-height:1.8;
  max-width:420px;
  margin-bottom:22px;
  letter-spacing:0.2px;
}

/* MEDIA CARD */
.about-media{
  position:relative;
  width:100%;
  max-width:360px;
  border-radius:20px;
  overflow:hidden;
  background:#ffb089;
  padding:14px;
  animation: floatImg 6s ease-in-out infinite;
}

.about-media video.video-preview{
  width:100%;
  border-radius:14px;
  display:block;
  object-fit:cover;
}


/* PLAY */
.play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  color:#fff;
  background:rgba(0,0,0,0.25);
  opacity:0;
  transition:0.3s;
}

@media(hover:hover){
  .about-media:hover .play-overlay{
    opacity:1;
  }
}

/* FLOAT */
@keyframes floatImg{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

/* TABLET */
@media(max-width:1024px){
  .about-wrapper{
    gap:40px;
  }
  .about-desc{
    font-size:14.5px;
  }
}

/* MOBILE */
@media(max-width:768px){
  .about-style{
    padding:80px 6%;
  }

  .about-wrapper{
    grid-template-columns:1fr;
    text-align:center;
  }

  .about-right{
    align-items:center;
  }

  .about-desc,
  .small-text,
  .about-quote{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .about-media{
    max-width:100%;
  }
}

/* EXTRA SMALL */
@media(max-width:480px){
  .about-desc{
    font-size:14px;
  }
  .about-left h2{
    margin-bottom:16px;
  }
}
/* VIDEO MODAL */
.video-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:0.4s ease;
  z-index:9999;
}

.video-modal.active{
  opacity:1;
  pointer-events:auto;
}

/* Modal Box */
.video-content{
  position:relative;
  width:min(90vw, 900px);
  height:min(90vh, 506px); /* 16:9 ratio approx */
  background:#000;
  border-radius:14px;
  overflow:hidden;
  transform:scale(0.85);
  transition:0.4s ease;
}

.video-modal.active .video-content{
  transform:scale(1);
}

/* Video */
.video-content video{
  width:100%;
  height:100%;
  object-fit:contain; /* full video visible */
  background:#000;
}

/* Close button */
.close-video{
  position:absolute;
  top:10px;
  right:12px;
  color:#fff;
  font-size:17px;
  cursor:pointer;
  z-index:5;
  background:rgba(0,0,0,0.5);
  padding:6px 10px;
  border-radius:50%;
  transition:0.3s;
}
.close-video:hover{
  background:#d32f2f;
}

/* MOBILE OPTIMIZATION */
@media(max-width:600px){
  .video-content{
    width:94vw;
    height:auto;
    aspect-ratio:9/16; /* mobile vertical video */
  }
}


/* ************************* */

/* STATS SECTION */
.stats-section{
  padding:80px 6%;
  background:#ffffff;
  color:#222;
}

.stats-wrapper{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  text-align:center;
}

.stat-card{
  padding:30px 20px;
  border-radius:16px;
  background:#f7f7f7;
  border:1px solid #eee;
  transition:0.3s ease;
}

.stat-card:hover{
  transform:translateY(-8px);
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.stat-card h3{
  font-size:42px;
  color:#d32f2f;
  margin-bottom:8px;
  font-weight:700;
}

.stat-card p{
  font-size:15px;
  letter-spacing:0.5px;
  color:#555;
}

/* MOBILE */
@media(max-width:700px){
  .stats-wrapper{
    grid-template-columns:1fr;
  }
}


/* ************************* */

/* SERVICES SECTION */
.services-section{
  padding:100px 6%;
  background:#ffffff;
}

.services-wrapper{
  max-width:1200px;
  margin:0 auto;
}

.services-header{
  text-align:center;
  margin-bottom:60px;
}

.services-header h2{
  font-family:"Playfair Display", serif;
  font-size:clamp(36px,4vw,52px);
  margin-bottom:10px;
}

.services-header span{
  color:#d32f2f;
}

.services-header p{
  max-width:600px;
  margin:0 auto;
  color:#555;
  font-size:15px;
}

/* GRID */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* CARD */
.service-card{
  background:#f7f7f7;
  padding:30px 22px;
  border-radius:18px;
  text-align:center;
  border:1px solid #eee;
  transition:0.3s ease;
}

.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  background:#ffffff;
}

/* ICON */
.service-icon{
  font-size:40px;
  margin-bottom:14px;
}

/* TITLE */
.service-card h3{
  font-size:18px;
  margin-bottom:10px;
  color:#111;
}

/* TEXT */
.service-card p{
  font-size:14px;
  line-height:1.7;
  color:#555;
}

/* TABLET */
@media(max-width:1024px){
  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* MOBILE */
@media(max-width:600px){
  .services-grid{
    grid-template-columns:1fr;
  }
}

/* ************************* */

/* ================= Our Process SECTION ================= */

.workflow-section{
  padding:110px 8%;
  background:#f7f7f7;
  font-family:"Inter", sans-serif;
}

.workflow-container{
  max-width:1200px;
  margin:auto;
}

.workflow-header{
  text-align:center;
  max-width:650px;
  margin:0 auto 70px;
}

.workflow-header h2{
  font-family:"Playfair Display", serif;
  font-size:clamp(38px,5vw,58px);
  color:#111;
  margin-bottom:15px;
}

.workflow-header h2 span{
  color:#d32f2f;
}

.workflow-header p{
  font-size:16px;
  color:#555;
  line-height:1.8;
}

/* GRID */
.workflow-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
}

/* CARD */
.workflow-card{
  background:#fff;
  padding:34px 26px;
  border-radius:22px;
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
  transition:0.4s ease;
  position:relative;
  overflow:hidden;
}

.workflow-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(211,47,47,0.08),transparent 60%);
  opacity:0;
  transition:.4s;
}

.workflow-card:hover::after{
  opacity:1;
}

.workflow-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

/* STEP */
.workflow-step{
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  color:#d32f2f;
  margin-bottom:14px;
}

/* TITLE */
.workflow-card h3{
  font-size:19px;
  margin-bottom:12px;
  color:#111;
}

/* TEXT */
.workflow-card p{
  font-size:14px;
  color:#666;
  line-height:1.7;
}

/* RESPONSIVE */
@media(max-width:1200px){
  .workflow-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

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

  .workflow-header{
    margin-bottom:50px;
  }
}

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

  .workflow-section{
    padding:80px 6%;
  }
}

.workflow-hidden{
  opacity:0;
  transform:translateY(30px);
}

.workflow-show{
  opacity:1;
  transform:translateY(0);
  transition:0.7s ease;
}

/* ************************* */

/* ================= WHY CHOOSE US SECTION ================= */
.bento-why{
  background:#ffffff;
  padding:80px 6%;
  font-family:'Montserrat', sans-serif;
}

.bento-container{
  max-width:1200px;
  margin:auto;
}

.bento-title{
  text-align:center;
  font-size:42px;
  margin-bottom:50px;
  font-weight:700;
  color:#111;
}

/* GRID */
.bento-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:20px;
}

/* BOX BASE */
.bento-box{
  border:1px solid #e5e5e5;
  border-radius:24px;
  padding:28px;
  background:#fff;
  transition:all .35s ease;
}

/* HOVER EFFECT */
.bento-box:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 30px rgba(211,47,47,0.15);
  border-color:#d32f2f;
}

/* LARGE */
.bento-box.large{
  grid-row:span 2;
}

.bento-box.large h3{
  font-size:26px;
  margin-bottom:15px;
}

.bento-box.large p{
  font-size:15px;
  line-height:1.7;
  color:#444;
}

/* SMALL */
.bento-box.small{
  text-align:center;
}

.bento-box.small .icon{
  font-size:28px;
  display:block;
  margin-bottom:10px;
}

.bento-box.small h4{
  font-size:16px;
  margin-bottom:6px;
  font-weight:600;
}

.bento-box.small p{
  font-size:13px;
  color:#666;
}

/* MEDIUM */
.bento-box.medium{
  grid-column:span 2;
  text-align:center;
}

.bento-box.medium h3{
  font-size:42px;
  color:#d32f2f;
  margin-bottom:6px;
}

.bento-box.medium p{
  font-size:15px;
  font-weight:600;
  color:#333;
}

/* RESPONSIVE */
@media(max-width:900px){
  .bento-grid{
    grid-template-columns:1fr 1fr;
  }

  .bento-box.large{
    grid-row:auto;
    grid-column:span 2;
  }

  .bento-box.medium{
    grid-column:span 2;
  }
}

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

  .bento-box.medium,
  .bento-box.large{
    grid-column:span 1;
  }

  .bento-title{
    font-size:32px;
  }
}

/* ************************* */

/* ================= Testimonials SECTION ================= */
/* =====================================================
   MAIN SECTION STYLING
   ===================================================== */
/* SECTION */

.test-simple-testimonials{
padding:80px 5%;
background:#fff;
text-align:center;
}

.test-section-title{
font-size:42px;
margin-bottom:50px;
color:#111;
font-family:Playfair Display,serif;
}

.test-section-title span{
color:#E31E24;
font-style:italic;
}


/* GRID */

.test-testimonial-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
max-width:1300px;
margin:auto;
}


/* CARD */

.test-video-card{
background:#fff;
border-radius:14px;
overflow:hidden;
cursor:pointer;
border:1px solid #eee;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:.4s;
}

.test-video-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
border-color:#E31E24;
}


/* THUMB */

.test-thumbnail-box{
position:relative;
aspect-ratio:16/9;
overflow:hidden;
background:#000;
}

.test-thumbnail-box img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(100%);
transition:.5s;
}

.test-video-card:hover img{
filter:grayscale(0%);
transform:scale(1.08);
}


/* PLAY ICON */

.test-play-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.35);
}

.test-play-icon{
width:70px;
height:50px;
background:#E31E24;
border-radius:12px;
position:relative;
box-shadow:0 6px 20px rgba(0,0,0,.4);
}

.test-play-icon:before{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-40%,-50%);
border-left:18px solid #fff;
border-top:12px solid transparent;
border-bottom:12px solid transparent;
}

.test-video-card:hover .test-play-icon{
transform:scale(1.15);
transition:.3s;
}


/* TEXT */

.test-card-info{
padding:25px;
text-align:left;
}

.test-card-info p{
font-size:15px;
color:#333;
margin-bottom:15px;
}


/* POPUP */

.test-video-popup{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.test-video-popup.active{
display:flex;
}

.test-popup-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.85);
backdrop-filter:blur(8px);
}

.test-popup-container{
position:relative;
width:100%;
max-width:1000px;
aspect-ratio:16/9;
background:#000;
border-radius:12px;
overflow:hidden;
z-index:10;
}

.test-video-wrapper,
#test-popupFrame{
width:100%;
height:100%;
border:none;
}

.test-close-btn{
position:absolute;
top:-50px;
right:0;
background:rgba(255,255,255,.2);
color:#fff;
border:none;
width:40px;
height:40px;
border-radius:50%;
font-size:20px;
cursor:pointer;
}

.test-close-btn:hover{
background:#E31E24;
}


/* ************************* */

/* ================= Platforms we work for ================= */
/* SECTION STYLING */
.platform-marquee-section {
    padding: 80px 0;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.marquee-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 6%;
}

.marquee-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    letter-spacing: 4px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.marquee-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 5vw, 48px);
    color: #1a1a1a;
    font-weight: 700;
}

.accent-text {
    color: #d32f2f;
}

/* MARQUEE ENGINE */
.marquee-wrapper {
    position: relative;
    width: 100%;
    padding: 20px 0;
    /* Edge fading mask */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-content {
    display: flex;
    width: max-content;
    animation: scroll-left 30s linear infinite;
}

/* Pause on hover */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

/* LOGO CARD STYLING */
.platform-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 15px 30px;
    margin: 0 20px;
    border-radius: 50px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    cursor: default;
}

.platform-logo:hover {
    border-color: #d32f2f;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(211, 47, 47, 0.1);
}

.platform-logo img {
    height: 32px;
    width: auto;
    filter: grayscale(100%);
    transition: 0.3s ease;
}

.platform-logo:hover img {
    filter: grayscale(0%);
}

.platform-logo span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #444;
}

/* ANIMATION KEYFRAMES */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Moves exactly half because we duplicated the list */
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .marquee-content {
        animation-duration: 20s; /* Faster scroll for smaller screens */
    }
    .platform-logo {
        padding: 10px 20px;
        margin: 0 10px;
    }
    .platform-logo span {
        font-size: 13px;
    }
    .platform-logo img {
        height: 24px;
    }
}

/* ************************* */

/* ================= footer ================= */
/* ================= CTA ================= */

.cta-section{
  padding:120px 6%;
  background:#f7f7f7;
  display:flex;
  justify-content:center;
}

.cta-card{
  max-width:1000px;
  width:100%;
  background:linear-gradient(145deg,#ffffff,#fafafa);
  padding:90px 50px;
  border-radius:42px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,0.06);
  border:1px solid #eee;
  position:relative;
  overflow:hidden;
}

.cta-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle, rgba(211,47,47,0.06), transparent 65%);
  z-index:0;
}

.cta-content{position:relative;z-index:1;}

.cta-mini-title{
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#999;
  margin-bottom:15px;
}

.cta-main-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(34px,5vw,56px);
  color:#111;
  margin-bottom:20px;
}

.accent-text{color:#d32f2f;}

.cta-desc{
  font-family:'Poppins',sans-serif;
  color:#666;
  max-width:580px;
  margin:0 auto 45px;
  line-height:1.75;
}

.cta-button{
  display:inline-block;
  padding:18px 50px;
  background:#111;
  color:#fff;
  text-decoration:none;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  border-radius:60px;
  transition:0.35s ease;
  box-shadow:0 15px 30px rgba(0,0,0,0.12);
}

.cta-button:hover{
  background:#d32f2f;
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 20px 40px rgba(211,47,47,0.3);
}

.cta-hint{
  display:block;
  margin-top:22px;
  font-size:12px;
  color:#aaa;
  font-family:'Inter',sans-serif;
}

/* ================= FOOTER ================= */
/* ===============================
   FOOTER BASE
================================ */
.site-footer{
  width:100%;
  background:#fff;
  border-top:1px solid #f2f2f2;
  font-family:'Poppins',sans-serif;
}

/* TOP LINE */
.footer-divider{
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    #E31E24,
    transparent
  );
  margin-bottom:60px;
}

/* ===============================
   CENTER ENGINE (4K SAFE)
================================ */
.footer-inner{
  max-width:1400px;
  margin:auto;
  padding:0 clamp(16px,4vw,60px);
}

/* ===============================
   GRID
================================ */
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(25px,3vw,50px);
  padding-bottom:60px;
}

/* ===============================
   HEADINGS
================================ */
.footer-box h3{
  font-size:clamp(12px,1vw,14px);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:22px;
  color:#111;
}

/* LOGO */
.footer-logo{
  font-family:'Playfair Display',serif;
  font-size:clamp(24px,2.4vw,32px);
  font-weight:900;
  margin-bottom:14px;
  color:#111;
}

.footer-logo span{
  color:#E31E24;
}

/* BRAND TEXT */
.brand-box p{
  font-size:clamp(13px,1vw,15px);
  line-height:1.7;
  color:#666;
  max-width:320px;
}

/* ===============================
   LINKS
================================ */
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom:11px;
}

.footer-links a{
  text-decoration:none;
  color:#666;
  font-size:clamp(13px,1vw,14px);
  transition:.3s;
  display:inline-block;
}

.footer-links a:hover{
  color:#E31E24;
  transform:translateX(5px);
}

/* ===============================
   SOCIAL ICONS
================================ */
.social-row{
  display:flex;
  gap:14px;
  margin-top:24px;
}

.footer-social-row{
  display:flex;
  gap:14px;
  margin-top:24px;
}

.social-icon{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.35s;
}

.social-icon img{
  width:18px;
  filter:grayscale(1);
  opacity:.6;
  transition:.3s;
}

.social-icon:hover{
  transform:translateY(-5px);
  border-color:#E31E24;
}

.social-icon:hover img{
  filter:none;
  opacity:1;
}

/* ===============================
   CONTACT TEXT
================================ */
.contact-box p{
  font-size:clamp(13px,1vw,14px);
  color:#666;
  margin:8px 0;
}

.contact-box a{
  color:#E31E24;
  text-decoration:none;
}

/* ===============================
   BOTTOM BAR
================================ */
.footer-bottom{
  border-top:1px solid #f0f0f0;
  background:#fcfcfc;
  padding:20px;
  text-align:center;
}

.footer-bottom p{
  margin:0;
  font-size:clamp(12px,1vw,13px);
  color:#888;
}

/* ===============================
   TABLET
================================ */
@media(max-width:1024px){

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

  .brand-box p{
    max-width:100%;
  }
}

/* ===============================
   MOBILE
================================ */
@media(max-width:700px){

  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:30px;
  }

  .brand-box p{
    margin:auto;
  }

  .social-row{
    justify-content:center;
  }

  .footer-social-row{
    justify-content:center;
  }

  .footer-links a:hover{
    transform:translateY(-3px);
  }
}

/* ===============================
   ULTRA SMALL
================================ */
@media(max-width:360px){

  .footer-inner{
    padding:0 12px;
  }

  .footer-logo{
    font-size:22px;
  }

  .footer-box h3{
    font-size:11px;
  }

}