:root{
  --cck-red:#FF4338;
  --cck-blue:#1877F2;
  --cck-orange:#FFA000;
  --ink:#232323;
  --text:#1B1B1B;
  --grey:#666B73;
  --grey-2:#9AA0A8;
  --line:#E6E6E6;
  --soft:#F7F7F7;
  --container:min(1320px, 92vw);
  --container-wide:min(1460px, 95vw);
  --shadow:0 24px 60px rgba(22,24,29,.10);
  --shadow-soft:0 14px 35px rgba(22,24,29,.07);
  --shadow-lift:0 24px 46px rgba(22,24,29,.13);
}

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

html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
  min-height:100%;
  -webkit-overflow-scrolling:touch;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--text);
  line-height:1.55;
  cursor:none;
  background:
    radial-gradient(circle at 8% 9%, rgba(255,67,56,.08), transparent 16%),
    radial-gradient(circle at 90% 12%, rgba(24,119,242,.10), transparent 18%),
    radial-gradient(circle at 82% 60%, rgba(255,160,0,.08), transparent 18%),
    radial-gradient(circle at 18% 82%, rgba(35,35,35,.05), transparent 16%),
    linear-gradient(180deg,#fafafa 0%, #f2f2f2 100%);
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,67,56,.05) 0 120px, transparent 121px),
    radial-gradient(circle at 86% 28%, rgba(24,119,242,.05) 0 160px, transparent 161px),
    radial-gradient(circle at 76% 82%, rgba(255,160,0,.05) 0 130px, transparent 131px);
  z-index:-3;
}

.bg-orbs{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-2;
}

.bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  opacity:.38;
  animation:floatOrb linear infinite;
}

.bg-orb.red{ background:radial-gradient(circle at 30% 30%, rgba(255,67,56,.20), rgba(255,67,56,.06) 58%, transparent 72%); }
.bg-orb.blue{ background:radial-gradient(circle at 30% 30%, rgba(24,119,242,.18), rgba(24,119,242,.05) 58%, transparent 72%); }
.bg-orb.orange{ background:radial-gradient(circle at 30% 30%, rgba(255,160,0,.20), rgba(255,160,0,.05) 58%, transparent 72%); }
.bg-orb.dark{ background:radial-gradient(circle at 30% 30%, rgba(35,35,35,.10), rgba(35,35,35,.03) 58%, transparent 72%); }

.bg-orb.o1{ width:280px; height:280px; left:-60px; top:120px; animation-duration:18s; }
.bg-orb.o2{ width:210px; height:210px; right:4%; top:180px; animation-duration:22s; animation-delay:-4s; }
.bg-orb.o3{ width:320px; height:320px; left:8%; bottom:8%; animation-duration:24s; animation-delay:-8s; }
.bg-orb.o4{ width:230px; height:230px; right:-40px; bottom:16%; animation-duration:19s; animation-delay:-6s; }
.bg-orb.o5{ width:170px; height:170px; left:52%; top:12%; animation-duration:16s; animation-delay:-3s; }
.bg-orb.o6{ width:150px; height:150px; left:68%; top:58%; animation-duration:20s; animation-delay:-9s; }

@keyframes floatOrb{
  0%{ transform:translate3d(0,0,0) scale(1); }
  25%{ transform:translate3d(18px,-22px,0) scale(1.03); }
  50%{ transform:translate3d(-10px,-42px,0) scale(.98); }
  75%{ transform:translate3d(-24px,-14px,0) scale(1.04); }
  100%{ transform:translate3d(0,0,0) scale(1); }
}

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

a{ text-decoration:none; color:inherit; }
button, input, textarea{ font:inherit; }

section{
  scroll-margin-top:110px;
  position:relative;
}

.container{ width:var(--container); margin:0 auto; }
.container-wide{ width:var(--container-wide); margin:0 auto; }

.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .75s ease, transform .75s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--cck-red);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.6px;
  margin-bottom:14px;
}

.eyebrow::before{
  content:"";
  width:38px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cck-red), var(--cck-orange));
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:34px;
}

.section-head h2{
  font-size:clamp(2rem,4vw,3.05rem);
  letter-spacing:-2px;
  line-height:1.02;
}

.cursor-dot,
.cursor-ring{
  position:fixed;
  top:0;
  left:0;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%, -50%);
  border-radius:50%;
}

.cursor-dot{
  width:10px;
  height:10px;
  background:linear-gradient(135deg, var(--cck-red), var(--cck-orange));
  box-shadow:0 0 0 8px rgba(255,255,255,.55);
}

.cursor-ring{
  width:34px;
  height:34px;
  border:1.5px solid rgba(24,119,242,.38);
  background:rgba(24,119,242,.06);
}

body.cursor-hover .cursor-ring{
  width:54px;
  height:54px;
  border-color:rgba(255,67,56,.25);
  background:rgba(255,160,0,.09);
}

body.cursor-hover .cursor-dot{
  width:12px;
  height:12px;
}

/* HEADER */
header{
  position:sticky;
  top:14px;
  z-index:3000;
  width:var(--container);
  margin:18px auto 0;
  padding:16px 20px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px);
  border:1px solid rgba(230,230,230,.95);
  border-radius:999px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:12px;
  box-shadow:0 12px 30px rgba(15,17,23,.06);
  transition:.35s ease;
}

header.scrolled{
  width:min(1420px, calc(100% - 26px));
  margin:10px auto 0;
  top:10px;
  padding:14px 26px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 34px rgba(15,17,23,.10);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:max-content;
}

.brand-mark{
  width:80px;
  height:80px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(15,17,23,.06);
  flex-shrink:0;
  padding:8px;
}

.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.brand-copy strong{
  font-size:.95rem;
}

.brand-copy span{
  color:var(--grey);
  font-size:.73rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
}

nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-right:10px;
}

nav a{
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  color:var(--grey);
  position:relative;
}

nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cck-red), var(--cck-orange));
  transition:.25s ease;
}

nav a:hover{ color:var(--ink); }
nav a:hover::after{ width:100%; }

.nav-cta{
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--cck-orange), #ffbe45);
  color:#2A1C0E;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  box-shadow:0 16px 28px rgba(255,160,0,.20);
  white-space:nowrap;
  border:1px solid rgba(255,160,0,.15);
}

.menu-btn{
  display:none;
  width:48px;
  height:48px;
  border:none;
  border-radius:14px;
  background:var(--soft);
  border:1px solid var(--line);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.menu-btn span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--ink);
  display:block;
}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:126px 0 60px;
  overflow:hidden;
}

.hero-grid{
  width:var(--container-wide);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
}

.hero-copy{
  max-width:760px;
  position:relative;
  z-index:2;
}

.hero-copy h1{
  font-size:clamp(2.45rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-3px;
  margin-bottom:20px;
  max-width:720px;
}

.hero-copy h1 .accent-red{ color:var(--cck-red); }

.hero-copy .lead{
  font-size:1.04rem;
  color:var(--grey);
  max-width:720px;
  margin-bottom:18px;
}

.hero-copy .lead + .lead{
  margin-bottom:28px;
}

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:16px 24px;
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.btn-primary{
  background:linear-gradient(135deg, var(--cck-orange), #ffbf4a);
  color:#2A1C0E;
  box-shadow:0 18px 34px rgba(255,160,0,.22);
}

.btn-secondary{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 12px 24px rgba(15,17,23,.05);
}

.hero-visual{
  min-height:680px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-art{
  width:min(660px,100%);
  height:640px;
  position:relative;
  margin:0 auto;
}

.shape-circle{
  position:absolute;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
}

.shape-circle.red{
  width:340px;
  height:340px;
  left:14px;
  top:88px;
  background:linear-gradient(135deg, var(--cck-red), #ff5f55);
}

.shape-circle.blue{
  width:310px;
  height:310px;
  right:24px;
  top:66px;
  background:linear-gradient(135deg, var(--cck-blue), #3f97ff);
}

.shape-circle.orange{
  width:190px;
  height:190px;
  left:220px;
  bottom:48px;
  background:linear-gradient(135deg, var(--cck-orange), #ffbc30);
  z-index:1;
}

.shape-card{
  position:absolute;
  width:250px;
  padding:22px;
  border-radius:28px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  z-index:4;
}

.shape-card.one{
  left:22px;
  top:18px;
}

.shape-card.two{
  right:18px;
  top:238px;
}

.shape-card .mini-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-bottom:10px;
  color:var(--grey);
}

.shape-card .mini-label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--cck-red), var(--cck-orange));
}

.shape-card strong{
  display:block;
  font-size:1.05rem;
  line-height:1.12;
  margin-bottom:8px;
}

.shape-card p{
  color:var(--grey);
  font-size:.88rem;
}

.hero-code-popup{
  position:absolute;
  width:190px;
  left:118px;
  bottom:155px;
  padding:16px 16px 14px;
  border-radius:22px;
  background:rgba(20,23,31,.96);
  color:#f5f7fb;
  z-index:5;
  box-shadow:0 22px 38px rgba(9,11,16,.28);
  border:1px solid rgba(255,255,255,.06);
}

.hero-code-top{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:12px;
}

.hero-code-top span{
  width:9px;
  height:9px;
  border-radius:50%;
  display:block;
}

.hero-code-top span:nth-child(1){ background:#ff5f57; }
.hero-code-top span:nth-child(2){ background:#ffbd2e; }
.hero-code-top span:nth-child(3){ background:#28c840; }

.hero-code-popup code{
  display:block;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:.79rem;
  line-height:1.65;
  color:#d9e6ff;
  white-space:pre-line;
}

.code-blue{ color:#76b7ff; }
.code-orange{ color:#ffcb70; }
.code-red{ color:#ff8a82; }
.code-green{ color:#9de2a5; }

.hero-soft-orb{
  position:absolute;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
  opacity:.45;
  filter:blur(1px);
}

.hero-soft-orb.one{
  width:180px;
  height:180px;
  right:0;
  top:8px;
  background:radial-gradient(circle, rgba(24,119,242,.12), transparent 70%);
}

.hero-soft-orb.two{
  width:220px;
  height:220px;
  right:20px;
  bottom:0;
  background:radial-gradient(circle, rgba(255,160,0,.12), transparent 70%);
}

/* HERO STATS */
.hero-stats{
  padding:24px 0 64px;
}

.vision-shell{
  width:var(--container-wide);
  margin:0 auto;
  display:grid;
  gap:28px;
}

.vision-block{
  padding:34px;
  border-radius:36px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,248,248,.96));
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}

.stats-head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:28px;
}

.stats-head h2{
  font-size:clamp(1.9rem,3vw,2.8rem);
  line-height:1.02;
  max-width:900px;
}

.vision-main{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.vision-card{
  min-height:220px;
  padding:24px;
  border-radius:30px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}

.vision-no{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  margin-bottom:16px;
  box-shadow:0 12px 24px rgba(15,17,23,.10);
}

.vision-card.red .vision-no{ background:linear-gradient(135deg, var(--cck-red), #ff5a50); }
.vision-card.blue .vision-no{ background:linear-gradient(135deg, var(--cck-blue), #4ca0ff); }
.vision-card.orange .vision-no{ background:linear-gradient(135deg, var(--cck-orange), #ffbe44); color:#2a1e12; }
.vision-card.dark .vision-no{ background:linear-gradient(135deg, #2e2e2e, #4a4a4a); }

.vision-card strong{
  display:block;
  font-size:1.24rem;
  margin-bottom:10px;
}

.vision-card p{
  color:var(--grey);
  font-size:.94rem;
}

/* CASES */
.cases-intro{
  padding:68px 0 24px;
}

.cases-intro-grid{
  width:var(--container-wide);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.cases-intro-copy p{
  color:var(--grey);
  max-width:860px;
  font-size:1rem;
}

.cases-title{
  font-size:clamp(2.05rem,4vw,3.1rem);
  letter-spacing:-2px;
  line-height:1.02;
  margin-bottom:16px;
}

.projects{
  padding:8px 0 10px;
  display:grid;
  gap:34px;
}

.project-band{
  width:100%;
  padding:38px 0;
}

.project-band:nth-child(odd){
  background:
    radial-gradient(circle at 12% 18%, rgba(24,119,242,.08), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
}

.project-band:nth-child(even){
  background:
    radial-gradient(circle at 88% 20%, rgba(255,160,0,.08), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,0));
}

.project-card{
  width:var(--container-wide);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(320px,.55fr) minmax(420px,1.45fr);
  gap:40px;
  align-items:center;
}

.project-card.alt{
  grid-template-columns:minmax(420px,1.45fr) minmax(320px,.55fr);
}

.project-copy{
  max-width:470px;
}

.project-copy h3{
  font-size:clamp(2rem,3vw,3.15rem);
  line-height:1;
  letter-spacing:-2px;
  margin-bottom:16px;
}

.project-copy p{
  color:var(--grey);
  font-size:1rem;
  max-width:460px;
}

.project-top{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}

.project-number{
  width:64px;
  height:64px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1rem;
  color:#fff;
  box-shadow:0 16px 28px rgba(15,17,23,.12);
  flex-shrink:0;
}

.project-number.n1{ background:linear-gradient(135deg, var(--cck-red), #ff5d55); }
.project-number.n2{ background:linear-gradient(135deg, var(--cck-blue), #49a0ff); }
.project-number.n3{ background:linear-gradient(135deg, var(--cck-orange), #ffbe45); color:#2a1e12; }
.project-number.n4{ background:linear-gradient(135deg, var(--ink), #4a4a4a); }

.project-label{
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--grey-2);
}

/* ESTA ES LA PARTE QUE TE LO ARREGLA EN DOMINIO */
.project-visual{
  position:relative;
  width:100%;
}

.visual-video,
.visual-video.vimeo-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#dbe3ea;
}

.visual-video::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 18%, rgba(24,119,242,.12), transparent 14%),
    radial-gradient(circle at 90% 14%, rgba(255,160,0,.12), transparent 16%);
  pointer-events:none;
  z-index:2;
}

.project-video-frame{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  border:0 !important;
  display:block !important;
  z-index:1;
}

/* CAPABILITIES */
.capabilities{
  padding:80px 0;
}

.capabilities .container-wide{
  position:relative;
}

.carousel-wrap{
  position:relative;
  overflow:hidden;
  border-radius:28px;
}

.carousel-wrap::before,
.carousel-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:110px;
  z-index:3;
  pointer-events:none;
}

.carousel-wrap::before{
  left:0;
  background:linear-gradient(90deg, rgba(244,244,244,1), rgba(244,244,244,0));
}

.carousel-wrap::after{
  right:0;
  background:linear-gradient(270deg, rgba(244,244,244,1), rgba(244,244,244,0));
}

.cap-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:loopCaps 36s linear infinite;
}

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

.capability-card{
  width:340px;
  min-height:310px;
  padding:26px;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fff 0%, #f8f8f8 100%);
  box-shadow:var(--shadow-soft);
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
}

.cap-index{
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  margin-bottom:18px;
  color:#fff;
  box-shadow:0 12px 24px rgba(15,17,23,.10);
}

.capability-card:nth-child(4n+1) .cap-index{ background:linear-gradient(135deg, var(--cck-red), #ff5d55); }
.capability-card:nth-child(4n+2) .cap-index{ background:linear-gradient(135deg, var(--cck-blue), #49a0ff); }
.capability-card:nth-child(4n+3) .cap-index{ background:linear-gradient(135deg, var(--cck-orange), #ffbf4a); color:#2a1e12; }
.capability-card:nth-child(4n+4) .cap-index{ background:linear-gradient(135deg, var(--ink), #4a4a4a); }

.capability-card h3{
  font-size:1.16rem;
  margin-bottom:10px;
  line-height:1.2;
}

.capability-card p{
  color:var(--grey);
  font-size:.93rem;
  margin-bottom:16px;
}

.capability-card ul{
  list-style:none;
  display:grid;
  gap:10px;
}

.capability-card li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:.87rem;
  font-weight:600;
  color:#222;
}

.capability-card li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--cck-red), var(--cck-orange));
  margin-top:6px;
  flex-shrink:0;
}

/* TESTIMONIALS */
.testimonials{
  padding:110px 0 100px;
  background:
    radial-gradient(circle at 84% 14%, rgba(255,160,0,.08), transparent 16%),
    radial-gradient(circle at 14% 80%, rgba(24,119,242,.08), transparent 18%);
  overflow:hidden;
}

.testimonials-wrap{
  width:var(--container-wide);
  margin:0 auto;
  position:relative;
}

.testimonials-header{
  display:flex;
  justify-content:flex-start;
  align-items:end;
  gap:24px;
  margin-bottom:34px;
}

.testimonials-header h2{
  font-size:clamp(2rem,4vw,3.25rem);
  letter-spacing:-2px;
  line-height:1.02;
  max-width:760px;
}

.testimonials-stage{
  position:relative;
  min-height:920px;
  padding:10px 0 40px;
}

.testimonial-spot{
  position:absolute;
  border-radius:30px;
  border:1px solid rgba(230,230,230,.95);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,248,248,.92));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.testimonial-spot::before{
  content:"“";
  position:absolute;
  left:20px;
  top:6px;
  font-size:5rem;
  line-height:1;
  font-weight:800;
  color:rgba(255,67,56,.12);
  pointer-events:none;
}

.testimonial-floating{
  width:340px;
  min-height:250px;
  padding:26px 24px 22px;
  z-index:2;
  animation:floatCard 5.5s ease-in-out infinite;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.testimonial-horizontal{
  width:520px;
  min-height:300px;
  padding:28px 26px 24px;
  z-index:4;
  animation:none;
}

.t1{ left:2%; top:60px; }
.t2{ right:2%; top:70px; }
.t6{ left:50%; top:200px; transform:translateX(-50%); }
.t3{ left:8%; top:560px; }
.t4{ right:8%; top:560px; }

@keyframes floatCard{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-12px); }
  100%{ transform:translateY(0px); }
}

.testimonial-text{
  padding-top:28px;
  color:#2b3340;
}

.testimonial-author{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:18px;
  margin-top:20px;
  border-top:1px solid rgba(35,35,35,.08);
  min-height:78px;
}

.avatar{
  width:58px;
  height:58px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 14px 26px rgba(15,17,23,.12);
  overflow:hidden;
  padding:8px;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.testimonial-author strong{
  display:block;
  font-size:1rem;
  line-height:1.2;
}

.testimonial-author span{
  display:block;
  color:var(--grey);
  font-size:.88rem;
  line-height:1.35;
  margin-top:3px;
}

.testimonial-backdrop-ring{
  position:absolute;
  left:50%;
  top:430px;
  transform:translate(-50%,-50%);
  width:830px;
  height:830px;
  border-radius:50%;
  border:1px dashed rgba(24,119,242,.14);
  z-index:0;
  pointer-events:none;
}

/* CONTACT */
.contact{
  padding:86px 0 26px;
}

.contact-wrap{
  width:min(920px, 92vw);
  margin:0 auto;
}

.contact-head{
  text-align:center;
  margin-bottom:28px;
}

.contact-head h2{
  font-size:clamp(2rem,4vw,3.05rem);
  line-height:1.02;
  letter-spacing:-2px;
  margin-bottom:12px;
}

.contact-head p{
  color:var(--grey);
  max-width:720px;
  margin:0 auto;
}

.contact-form{
  border-radius:30px;
  padding:30px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.field{
  display:grid;
  gap:8px;
  margin-bottom:16px;
}

.field.full{
  grid-column:1 / -1;
}

.field label{
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#39404c;
}

.field input,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fafafa;
  border-radius:16px;
  padding:16px;
  font:inherit;
  color:var(--text);
  outline:none;
}

.field textarea{
  min-height:180px;
  resize:vertical;
}

/* FOOTER */
.footer-section{
  padding:34px 0 30px;
}

.footer-shell{
  width:var(--container-wide);
  margin:0 auto;
  border:1px solid rgba(230,230,230,.96);
  border-radius:30px;
  background:
    radial-gradient(circle at 8% 18%, rgba(24,119,242,.10), transparent 18%),
    radial-gradient(circle at 92% 18%, rgba(255,160,0,.12), transparent 18%),
    radial-gradient(circle at 50% 120%, rgba(255,67,56,.05), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  box-shadow:0 20px 48px rgba(15,17,23,.06);
  overflow:hidden;
  position:relative;
}

.footer-shell::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--cck-red), var(--cck-orange), var(--cck-blue));
}

.footer-main{
  padding:28px 28px 20px;
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1fr;
  gap:22px;
  align-items:start;
}

.footer-brand{
  padding-right:8px;
}

.footer-brand .brand-line{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.footer-brand .brand-mark{
  width:80px;
  height:80px;
  border-radius:20px;
  padding:6px;
}

.footer-brand .brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.footer-brand strong{
  display:block;
  font-size:1rem;
}

.footer-brand span{
  display:block;
  color:var(--grey);
  font-size:.76rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
}

.footer-brand p{
  color:var(--grey);
  max-width:320px;
  font-size:.92rem;
  line-height:1.6;
}

.footer-info{
  min-height:100%;
  padding:6px 0 6px 18px;
  border-left:1px solid rgba(230,230,230,.95);
}

.footer-label{
  display:inline-block;
  margin-bottom:10px;
  color:var(--grey-2);
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.1px;
}

.footer-value,
.footer-value a{
  color:var(--ink);
  font-size:.96rem;
  font-weight:600;
  line-height:1.55;
}

.footer-contact-person{
  display:grid;
  gap:3px;
  line-height:1.45;
}

.footer-contact-person strong{
  font-size:.98rem;
}

.footer-contact-person .role{
  font-size:.88rem;
  color:var(--grey);
  font-weight:600;
}

.footer-contact-person .mail a{
  font-size:.92rem;
  color:var(--ink);
  font-weight:700;
  word-break:break-word;
}

.footer-social{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}

.social-chip{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  box-shadow:0 8px 18px rgba(15,17,23,.04);
}

.social-chip svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.facebook-icon{
  fill:currentColor !important;
  stroke:none !important;
}

.footer-bottom{
  padding:14px 24px 16px;
  border-top:1px solid rgba(230,230,230,.88);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.footer-copy{
  color:var(--grey);
  font-size:.8rem;
  font-weight:700;
}

/* BACK TO TOP */
.back-to-top-floating{
  position:fixed;
  right:28px;
  bottom:34px;
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--cck-orange), var(--cck-red));
  color:#fff;
  border:1px solid rgba(255,67,56,.18);
  box-shadow:0 18px 34px rgba(255,160,0,.24);
  z-index:2500;
}

.back-to-top-floating svg{
  width:20px;
  height:20px;
  stroke:#fff;
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* RESPONSIVE */
@media (max-width:1280px){
  .footer-main{
    grid-template-columns:1fr 1fr;
    padding:24px 24px 18px;
    gap:18px;
  }

  .footer-brand{
    grid-column:1 / -1;
    padding-right:0;
  }

  .footer-info{
    border-left:none;
    border-top:1px solid rgba(230,230,230,.95);
    padding:16px 0 0;
  }

  .vision-main{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1180px){
  .hero-grid,
  .project-card,
  .project-card.alt{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:auto;
    padding-top:120px;
  }

  .hero-visual{
    min-height:620px;
  }

  .section-head,
  .stats-head,
  .testimonials-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .testimonials-stage{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:0;
  }

  .testimonial-backdrop-ring{
    display:none;
  }

  .testimonial-spot,
  .testimonial-floating,
  .testimonial-horizontal{
    position:relative;
    inset:auto;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100%;
    min-height:auto;
    animation:none;
  }

  .t1{ order:1; }
  .t2{ order:2; }
  .t6{ order:3; grid-column:1 / -1; }
  .t3{ order:4; }
  .t4{ order:5; }

  .vision-main{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:860px){
  body{ cursor:auto; }
  .cursor-dot,.cursor-ring{ display:none; }

  header{
    border-radius:28px;
    padding:16px 18px;
    grid-template-columns:auto 1fr auto;
  }

  header.scrolled{
    width:calc(100% - 16px);
    margin:8px auto 0;
    padding:14px 16px;
  }

  .menu-btn{ display:flex; }

  nav{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 12px);
    background:rgba(255,255,255,.98);
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow-soft);
    padding:18px;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    margin-right:0;
  }

  header.open nav{ display:flex; }
  .nav-cta{ display:none; }

  .vision-main,
  .form-grid,
  .footer-main,
  .testimonials-stage{
    grid-template-columns:1fr;
  }

  .footer-brand{ grid-column:auto; }

  .footer-info{
    border-left:none;
    border-top:1px solid rgba(230,230,230,.9);
    padding:14px 0 0;
  }

  .footer-shell{
    border-radius:26px;
  }

  .footer-main{
    padding:22px 18px 16px;
    gap:14px;
  }
}

@media (max-width:620px){
  .hero{
    padding-top:110px;
  }

  .brand-copy{
    display:none;
  }

  .hero-copy h1{
    font-size:2.45rem;
    letter-spacing:-1.8px;
  }

  .hero-copy .lead{
    font-size:.97rem;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .btn{ width:100%; }

  .hero-visual{ min-height:575px; }
  .hero-art{ height:575px; }

  .shape-circle.red{
    width:200px;
    height:200px;
    left:10px;
    top:120px;
  }

  .shape-circle.blue{
    width:170px;
    height:170px;
    right:18px;
    top:170px;
  }

  .shape-circle.orange{
    width:120px;
    height:120px;
    left:108px;
    bottom:44px;
  }

  .shape-card{
    width:176px;
    padding:15px;
    border-radius:24px;
  }

  .shape-card.one{
    left:14px;
    top:26px;
  }

  .shape-card.two{
    right:8px;
    top:208px;
  }

  .hero-code-popup{
    width:148px;
    left:72px;
    top:372px;
    right:auto;
    bottom:auto;
    padding:11px;
    z-index:6;
  }

  .project-copy h3{ font-size:2rem; }

  .visual-video,
  .visual-video.vimeo-wrap{
    border-radius:24px;
  }

  .vision-block,
  .contact-form,
  .testimonial-floating,
  .testimonial-horizontal{
    padding:22px;
  }

  .vision-main{
    grid-template-columns:1fr;
  }

  .testimonials{
    padding:80px 0;
  }

  .footer-shell{
    border-radius:22px;
  }

  .footer-main{
    padding:18px 16px 12px;
    gap:12px;
  }

  .back-to-top-floating{
    width:50px;
    height:50px;
    right:14px;
    bottom:20px;
  }

  .back-to-top-floating svg{
    width:18px;
    height:18px;
  }
}

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