/* Reference-driven homepage: navy / gold / platinum */

.page-home { overflow-x: hidden; background: #000000; }
.page-home .nav-cta { border-radius: 999px; }
.btn-pill { border-radius: 999px !important; padding: 0.85rem 1.6rem; }

.cine {
  height: 240vh;
  position: relative;
}
.cine-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  --p: 0;
}
.cine-wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 78% 40%, rgba(123, 0, 255, 0.26), transparent 55%),
    radial-gradient(ellipse 40% 40% at 82% 28%, rgba(168, 85, 247, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(5, 11, 20, 0.4), transparent);
  pointer-events: none;
}

.cine-type {
  position: absolute;
  left: 5vw;
  top: 12vh;
  z-index: 2;
  margin: 0;
  font-size: clamp(3.4rem, 10vw, 8.6rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: #fff;
  max-width: 90vw;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.cine-line { display: inline-block; overflow: hidden; }
.cine-line span { display: inline-block; }
.cine-a {
  opacity: calc(1 - var(--p) * 1.6);
  transform: translateY(calc(var(--p) * -80px)) scale(calc(1 - var(--p) * 0.08));
}
.cine-b {
  opacity: calc((var(--p) - 0.28) * 2.4);
  transform: translateY(calc((1 - var(--p)) * 50px));
  pointer-events: none;
}

.cine-laptop {
  position: absolute;
  left: 50%;
  bottom: -14vh;
  width: min(72vw, 920px);
  transform: translateX(-42%);
  z-index: 3;
}
.cine-laptop .lap {
  transform: translateY(calc(var(--p) * -4vh)) scale(calc(1.02 - var(--p) * 0.06));
}
.lap-lid {
  background: linear-gradient(180deg, #111111, #000000 70%);
  border: 1px solid rgba(200,200,200,0.16);
  border-radius: 18px 18px 8px 8px;
  padding: 12px 12px 0;
  box-shadow: 0 50px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(123,0,255,0.12), 0 0 60px rgba(123,0,255,0.08);
  position: relative;
}
.lap-lid::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0.09), transparent 30%);
  pointer-events: none;
}
.lap-screen {
  height: min(42vh, 380px);
  border-radius: 8px;
  overflow: hidden;
  background: #000000;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.55), 0 0 24px rgba(168,85,247,0.10);
}
.lap-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.10), transparent 26%);
}
.lap-base {
  height: 14px;
  background: linear-gradient(#111111, #000000);
  border-top: 1px solid rgba(168,85,247,0.18);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 30px rgba(0,0,0,0.5);
}
.cine-laptop .lap-lid { padding: 0; background: none; border: none; box-shadow: none; }
.cine-laptop .lap-lid::after { display: none; }
.cine-laptop .lap-screen { background: none; box-shadow: none; }
.cine-laptop .tunnel { background: none; }
.cine-laptop .lap-base { display: none; }
.cine-laptop .lap-screen { height: auto; overflow: visible; }
.cine-laptop .lap-screen::after { display: none; }
.cine-laptop .tunnel { transform: none; animation: none; height: auto; }
.cine-laptop .tunnel img { width: 100%; height: auto; object-fit: contain; display: block; }
.tunnel {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(123,0,255,0.08) 18px 19px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(200,200,200,0.05) 18px 19px),
    radial-gradient(circle at 50% 120%, rgba(168,85,247,0.45), transparent 45%),
    linear-gradient(#000000, #0A0A0A);
  transform: perspective(400px) rotateX(18deg) scale(1.35);
  transform-origin: 50% 100%;
  animation: tunnel 14s linear infinite;
}
.tunnel.gold { filter: saturate(1.2); }
@keyframes tunnel { to { background-position: 0 80px, 0 80px, 0 0, 0 0; } }

.cine-card {
  position: absolute;
  z-index: 4;
  background: rgba(10, 15, 23, 0.72);
  border: 1px solid rgba(200,200,200,0.16);
  border-radius: 22px;
  padding: 22px 24px;
  backdrop-filter: blur(10px);
  max-width: 280px;
}
.cine-card p { color: #C8C8C8; margin: 0; font-size: 0.95rem; }
.cine-card-copy {
  right: 7vw; top: 34vh;
  opacity: calc(1 - var(--p) * 1.8);
  transform: translateY(calc(var(--p) * 30px));
}
.cine-card-stat {
  right: 8vw; bottom: 16vh;
  opacity: calc(1 - var(--p) * 1.8);
}
.cine-card-stat strong { display: block; font-size: 2.6rem; color: #A855F7; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; min-width: 4ch; }
.cine-card-stat span, .cine-card-stat small { color: #8B95A3; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; }
.cine-card-cta {
  left: 6vw; bottom: 14vh; top: auto;
}
.cine-ico {
  display: block; width: 28px; height: 28px; margin-bottom: 12px;
  border: 1px solid #7B00FF; border-radius: 6px;
  background: linear-gradient(135deg, transparent 40%, #7B00FF);
}

.hp-block { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 96px 0; }
.hp-center-h, .hp-why h2, .hp-tools + h2, #technology > h2 {
  text-align: center;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 12px;
  overflow: hidden;
}
.hp-center { text-align: center; margin-top: 36px; }
.hp-note { text-align: center; color: #8B95A3; font-size: 0.82rem; }

.hp-cert-marquee { overflow: hidden; margin-top: 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hp-cert-track { display: flex; gap: 56px; width: max-content; animation: logoSlide 18s linear infinite; }
.hp-cert-track span { color: #E4E4E4; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; font-weight: 700; opacity: 0.75; position: relative; padding-left: 22px; white-space: nowrap; }
.hp-cert-track span::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: #7B00FF; }
.hp-why-pros { display: flex; gap: 18px; max-width: 720px; margin: 0 auto -170px; justify-content: center; position: relative; z-index: 3; }
.hp-why-pros figure { margin: 0; text-align: center; }
.pros-ph { width: 110px; height: 130px; border-radius: 14px; border: 1px dashed rgba(200,200,200,0.25); background: rgba(255,255,255,0.02); margin-bottom: 10px; }
.hp-why-pros figcaption { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8B95A3; }

.hp-panel {
  border: 1px solid rgba(200,200,200,0.12);
  border-radius: 28px;
  background: #0A0A0A;
  padding: 36px 40px;
}
.hp-world { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: center; }
.hp-map { position: relative; min-height: 240px; }
.hp-map::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(200,200,200,0.05) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(200,200,200,0.05) 34px 35px);
  pointer-events: none;
}
.world-svg { width: 100%; height: auto; }
.pin {
  position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  background: #C8C8C8; transform: rotate(-45deg);
  box-shadow: 0 0 0 4px rgba(200,200,200,0.12);
}
.pin.gold { background: #A855F7; }
.hp-world-copy h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); margin: 0 0 16px; }
.hp-world-copy p { color: #A7B0BC; }

.hp-services {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  padding: 40px 0 40px;
}
.hp-svc-grid { display: grid; grid-template-columns: 0.85fr 1.55fr; gap: 64px; align-items: start; }
.hp-svc-head { max-width: 420px; margin: 0; text-align: left; position: sticky; top: 110px; }
.hp-svc-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 12px; }
.hp-svc-head p { color: #A7B0BC; margin: 0 0 22px; }
.hp-svc-rows { border-top: 1px solid rgba(255,255,255,0.09); }
.hp-svc-item {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start;
  padding: 44px 0; border-bottom: 1px solid rgba(255,255,255,0.09);
  transition: background .35s;
}
.hp-svc-item:hover { background: rgba(255,255,255,0.015); }
.hp-svc-text h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 14px; text-align: left; text-decoration: underline; text-underline-offset: 8px; text-decoration-color: rgba(255,255,255,0.55); }
.hp-svc-text p { color: #A7B0BC; margin: 0; text-align: left; max-width: 52ch; }
.hp-svc-thumb { height: 300px; order: -1; width: 100%; border-radius: 18px; border: 1px solid rgba(200,200,200,0.12); position: relative; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 0 40px rgba(123,0,255,0.06); }
.hp-svc-thumb::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,0.05) 26px 27px), radial-gradient(circle at 80% 20%, rgba(168,85,247,0.14), transparent 45%); }
.hp-svc-thumb::after { content:''; position:absolute; left:22px; top:22px; width:42px; height:42px; border:1px solid rgba(168,85,247,0.5); border-radius:10px; background: linear-gradient(135deg, transparent 45%, rgba(123,0,255,0.6)); }
.hp-svc-thumb { transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.hp-svc-item:hover .hp-svc-thumb { transform: scale(1.03); }
.hp-svc-frame {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 88px);
}
.hp-svc-nav { display: grid; align-content: center; gap: 4px; position: relative; padding-left: 14px; }
.hp-svc-marker {
  position: absolute; left: 0; top: 0; width: 2px; height: 40px;
  background: #7B00FF; border-radius: 2px; pointer-events: none;
}
.hp-svc-nav-item {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0;
  color: #8B95A3;
  border-bottom: 1px solid rgba(200,200,200,0.08);
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-svc-nav-item span { color: inherit; font-size: 0.72rem; letter-spacing: 0.12em; }
.hp-svc-nav-item.is-active { color: #A855F7; }
.hp-svc-board { display: grid; gap: 28px; }
.hp-svc-copy-block { min-height: 168px; overflow: hidden; }
.hp-svc-copy-block h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; margin: 0 0 14px; }
.hp-svc-copy-block p { color: #A7B0BC; max-width: 34ch; }
.hp-svc-visuals { position: relative; min-height: min(48vh, 380px); }
.hp-svc-visual {
  position: absolute; inset: 0;
  border-radius: 22px;
  opacity: 0;
  z-index: 0;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 0 40px rgba(123,0,255,0.08);
  overflow: hidden;
}
.hp-svc-visual::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,0.05) 26px 27px),
    radial-gradient(circle at 80% 20%, rgba(168,85,247,0.14), transparent 45%);
}
.hp-svc-visual::after {
  content: ''; position: absolute; left: 24px; top: 24px; width: 44px; height: 44px;
  border: 1px solid rgba(168,85,247,0.5); border-radius: 10px;
  background: linear-gradient(135deg, transparent 45%, rgba(123,0,255,0.6));
}
.vis-ai::after { border-radius: 50%; }
.vis-mobile::after { width: 26px; height: 46px; border-radius: 8px; }
.vis-shop::after { width: 46px; height: 30px; border-radius: 6px; }
.vis-cloud::after { border-radius: 50%; width: 48px; height: 30px; }
.vis-ux::after { border-radius: 2px; height: 34px; }
.vis-soft::after { transform: rotate(45deg); border-radius: 6px; }
.vis-team::after { border-radius: 50%; box-shadow: 18px 8px 0 -6px rgba(123,0,255,0.7), -4px 20px 0 -8px rgba(168,85,247,0.6); }
.vis-web::after { border-radius: 10px 10px 2px 2px; }
.hp-svc-visual.is-on { opacity: 1; z-index: 1; }
.hp-svc-sticky { position: sticky; top: 88px; }
.hp-svc-row {
  display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: center;
  padding: 28px 0; border-bottom: 1px solid rgba(200,200,200,0.12);
  color: #8B95A3;
}
.vis-web { background: linear-gradient(135deg, #0A0A0A, #111111 60%, #2a3b52); }
.vis-soft { background: linear-gradient(135deg, #111111, #111111 60%, rgba(123,0,255,0.35)); }
.vis-mobile { background: linear-gradient(135deg, #000000, #111111 70%, #111111); }
.vis-ux { background: linear-gradient(90deg, #0A0A0A, #111111 70%, rgba(168,85,247,0.30)); }
.vis-ai { background: radial-gradient(circle at 70% 40%, rgba(168,85,247,0.35), #0A0A0A 75%); }
.vis-shop { background: linear-gradient(#111111, #111111 70%, rgba(123,0,255,0.4)); }
.vis-cloud { background: linear-gradient(160deg, #000000, #111111 70%, #111111); }
.vis-team { background: linear-gradient(45deg, #0A0A0A 40%, rgba(138,0,255,0.35)); }

.hp-why { text-align: center; padding: 80px 24px 40px; }
.hp-why-art { position: relative; max-width: 720px; height: 340px; margin: 40px auto 20px; }
.hp-why-art::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,0,255,0.45), transparent);
}
.hp-why-art .bars { position: absolute; inset: 32px 8% 0; display: flex; align-items: flex-end; gap: 18px; height: auto; padding: 0; }
.hp-why-art .bars i {
  flex: 1; background: linear-gradient(to top, rgba(123,0,255,0.14), rgba(123,0,255,0.42));
  border-radius: 8px 8px 0 0;
}

.hp-stats {
  width: min(1240px, calc(100% - 64px));
  margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.hp-stat {
  border: 1px solid rgba(200,200,200,0.14);
  border-radius: 18px;
  padding: 28px 18px;
  text-align: left;
}
.hp-stat strong { display: block; font-size: 2.4rem; color: #fff; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.hp-stat span { color: #8B95A3; font-size: 0.85rem; }

.hp-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.hp-case { display: block; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); }
.hp-case:hover { transform: translateY(-6px); }
.hp-case-img {
  height: 240px; border-radius: 18px; margin-bottom: 14px; position: relative; overflow: hidden;
  display: grid; place-items: end start; padding: 16px;
  transform: scale(1); transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.hp-case-img::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 16%; bottom: 18%;
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255,255,255,0.14); border-bottom: none;
  background:
    linear-gradient(rgba(5,8,14,0.85), rgba(5,8,14,0.35)) padding-box,
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,0.05) 34px 35px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.hp-case-img::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 16%; height: 22px;
  border-radius: 12px 12px 0 0; border: 1px solid rgba(255,255,255,0.10); border-bottom: none;
  background: linear-gradient(rgba(10,15,23,0.9), rgba(10,15,23,0.75));
}
.hp-case-img span { position: relative; z-index: 1; text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
.hp-case:hover .hp-case-img { transform: scale(1.04); }
.hp-case h3 { transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); }
.hp-case:hover h3 { transform: translateY(-6px); }
.hp-case-img span { font-weight: 700; }
.hp-case h3 { margin: 0 0 14px; font-size: 1.15rem; text-align: left; }
.hp-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-pills span {
  border: 1px solid rgba(200,200,200,0.2); border-radius: 999px; padding: 6px 12px; font-size: 0.75rem; color: #C8C8C8;
}
.vis-inventory { background: linear-gradient(160deg, #0A0A0A, #111111 60%, rgba(123,0,255,0.35)); }
.vis-health { background: linear-gradient(160deg, #0A0A0A, #111111 70%, #111111); }
.vis-commerce { background: linear-gradient(160deg, #111111, #111111 70%, rgba(168,85,247,0.3)); }

.hp-tools { display: grid; grid-template-columns: 240px 1fr; gap: 28px; margin-top: 40px; align-items: start; }
.hp-tool-nav { display: grid; gap: 10px; position: relative; }
.hp-tool-indicator {
  position: absolute; left: -8px; top: 0; width: 2px; height: 44px;
  background: #7B00FF; border-radius: 2px; pointer-events: none;
}
.hp-tool-nav button {
  background: transparent; border: 1px solid rgba(200,200,200,0.16); color: #C8C8C8;
  border-radius: 999px; padding: 14px 18px; text-align: left; cursor: pointer;
}
.hp-tool-nav button.is-on { background: #7B00FF; color: #000000; border-color: #7B00FF; font-weight: 700; }
.hp-tool-stage {
  border: 1px solid rgba(200,200,200,0.12); border-radius: 24px; padding: 28px; min-height: 280px;
  overflow: hidden; position: relative;
}
.hp-tool-panel h3 { margin: 0 0 16px; }
.hp-tool-panel ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hp-tool-panel li {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(200,200,200,0.12); border-radius: 14px; padding: 14px 16px;
  opacity: 0; transform: translateX(48px);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.45s ease;
}
#technology .hp-tools:hover .hp-tool-panel li,
#technology .hp-tools:focus-within .hp-tool-panel li { opacity: 1; transform: translateX(0); }
#technology .hp-tool-panel li:nth-child(1) { transition-delay: 0.02s; }
#technology .hp-tool-panel li:nth-child(2) { transition-delay: 0.08s; }
#technology .hp-tool-panel li:nth-child(3) { transition-delay: 0.14s; }
#technology .hp-tool-panel li:nth-child(4) { transition-delay: 0.20s; }
#technology .hp-tool-panel li:nth-child(5) { transition-delay: 0.26s; }
#technology .hp-tool-panel li:nth-child(6) { transition-delay: 0.32s; }
#technology .hp-tool-panel li:nth-child(7) { transition-delay: 0.38s; }
#technology .hp-tool-panel li:nth-child(8) { transition-delay: 0.44s; }
.hp-tool-panel span { color: #7B00FF; font-weight: 700; width: 2ch; }
html:not(.has-gsap) .hp-tool-panel.is-on { animation: panelIn 0.45s cubic-bezier(0.22,1,0.36,1); }
@keyframes panelIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.hp-approach { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; min-height: 340px; }
.hp-approach-visual { position: relative; min-height: 300px; }
.hp-metric-float {
  position: absolute; left: 8%; top: 28%; z-index: 3;
  background: rgba(10,15,23,0.88); border: 1px solid rgba(200,200,200,0.16);
  border-radius: 16px; padding: 18px 22px;
}
.hp-metric-float strong { display: block; font-size: 2.4rem; color: #fff; font-variant-numeric: tabular-nums; min-width: 4ch; }
.hp-approach .phone { position: absolute; width: 150px; }
.hp-approach .tilt-a { right: 28%; top: 8%; transform: rotate(-12deg); }
.hp-approach .tilt-b { right: 6%; top: 18%; transform: rotate(10deg); z-index: 2; }

.hp-logo-marquee { overflow: hidden; margin-top: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hp-logo-track { display: flex; gap: 56px; width: max-content; animation: logoSlide 28s linear infinite; }
.hp-logo-rev .hp-logo-track { animation-direction: reverse; }
.hp-logo-track span { color: #E4E4E4; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.82rem; white-space: nowrap; opacity: 0.7; }
.hp-logo-track span:hover { opacity: 1; color: #A855F7; }
@keyframes logoSlide { to { transform: translateX(-50%); } }

.hp-voice-top {
  display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 24px;
  border: 1px solid rgba(200,200,200,0.12); border-radius: 22px; padding: 28px; margin: 32px 0 18px;
}
.hp-quotes { max-width: 820px; margin: 0 auto; min-height: 240px; }
.hp-quotes-3 { max-width: none; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 18px; align-items: center; margin-top: 18px; }
.hp-quotes-3 blockquote { margin: 0; padding: 30px 26px; }
.hp-quotes-3 blockquote.is-on { transform: translateY(-10px); }
.hp-quotes blockquote {
  margin: 0; border: 1px solid rgba(200,200,200,0.14); border-radius: 18px; padding: 36px 32px;
  background: rgba(7, 17, 31, 0.7);
}
html:not(.has-gsap) .hp-quotes blockquote { animation: panelIn 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.hp-quotes blockquote.is-on { background: rgba(7, 17, 31, 0.85); border: 1px solid rgba(123,0,255,0.55); box-shadow: 0 0 0 1px rgba(123,0,255,0.15), 0 18px 48px rgba(0,0,0,0.35); }
.hp-quotes blockquote.is-on::before { content: '“'; display: block; font-size: 2.6rem; line-height: 1; color: #A855F7; margin-bottom: 8px; font-family: Georgia, serif; }
.hp-quotes blockquote p { color: #E4E4E4; }

.hp-team { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-top: 36px; }
.hp-person .ph {
  height: 300px; border-radius: 18px; margin-bottom: 12px;
  display: grid; place-content: center; gap: 10px; text-align: center;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #C8C8C8;
  position: relative; overflow: hidden;
  border: 1px solid rgba(200,200,200,0.10);
}
.hp-person .ph::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.06), transparent 55%),
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,0.035) 22px 23px);
}
.ph-mono {
  font-size: 2.6rem; letter-spacing: 0.04em; font-weight: 800; color: rgba(242,242,242,0.9);
  width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto;
  border: 1px solid rgba(123,0,255,0.45); border-radius: 50%;
  background: rgba(5,11,20,0.35);
}
.hp-person .ph small { color: #8B95A3; }
.ph.tone-gold { background: linear-gradient(#171204, rgba(123,0,255,0.55)); }
.ph.tone-navy { background: linear-gradient(#000000, rgba(58,90,138,0.55)); }
.ph.tone-silver { background: linear-gradient(#101318, rgba(143,152,166,0.5)); }
.ph.tone-dusk { background: linear-gradient(#180f1e, rgba(138,74,58,0.5)); }
.ph.tone-forest { background: linear-gradient(#0a120e, rgba(61,107,79,0.55)); }
.ph.tone-wine { background: linear-gradient(#12080d, rgba(107,42,58,0.55)); }
.hp-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.hp-phases { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 48px; align-items: start; }
.hp-phase-list { list-style: none; padding: 0; margin: 0; }
.hp-phases-sticky { position: sticky; top: 100px; }
.hp-phase { display: grid; grid-template-columns: 64px 1fr 180px; gap: 16px; align-items: center; padding: 28px 0; border-bottom: 1px solid rgba(200,200,200,0.12); color: #8B95A3; }
.hp-phase.is-active { color: #F2F2F2; }
.hp-phase.is-active .num { color: #A855F7; }
.hp-phase .shot { height: 90px; border-radius: 14px; background: linear-gradient(135deg, #0A0A0A, rgba(123,0,255,0.4)); }
.hp-case[hidden] { display: none !important; }
.elementor-animation-shrink { transition-duration: .3s; transition-property: transform; }
.elementor-animation-shrink:active, .elementor-animation-shrink:focus, .elementor-animation-shrink:hover { transform: scale(.9); }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0,-100%,0); } to { opacity: 1; transform: none; } }
.fadeInDown { animation-name: fadeInDown; }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%,0,0); } to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%,0,0); } to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0,100%,0); } to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3,.3,.3); } 50% { opacity: 1; } }
.zoomIn { animation-name: zoomIn; }
.page-service h1, .page-service h2, .page-service h3, .page-service p, .page-service li, .page-service a, .page-service summary, .page-service label, .page-service span, .page-service strong, .page-service small, .page-service button { transition: color .25s ease; }
.page-service h1:hover, .page-service h2:hover, .page-service h3:hover, .page-service p:hover, .page-service li:hover, .page-service a:hover, .page-service summary:hover, .page-service label:hover, .page-service span:hover, .page-service strong:hover, .page-service small:hover, .page-service button:hover { color: #A855F7 !important; }
.svc-help { }
.svc-help > div:first-child h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.svc-help { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px 48px; align-items: start; }
.svc-help-intro { text-align: right; color: #A7B0BC; line-height: 1.7; margin-top: 12px; }
.svc-help-cards { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.svc-help-card { border: 1px solid rgba(200,200,200,0.14); border-radius: 22px; background: rgba(255,255,255,0.02); padding: 32px 34px; }
.svc-help-card h3 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0 0 12px; }
.svc-help-card h3::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: #7B00FF; flex: none; }
.svc-help-card p { color: #A7B0BC; margin: 0; line-height: 1.7; padding-left: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-tech { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; margin-top: 40px; }
.svc-tech-tabs { display: grid; gap: 12px; }
.svc-tech-tabs button { text-align: left; padding: 14px 20px; border-radius: 999px; border: 1px solid rgba(200,200,200,0.16); background: transparent; color: #E4E4E4; cursor: pointer; font-weight: 600; }
.svc-tech-tabs button.is-on { background: #7B00FF; color: #000000; border-color: #7B00FF; }
.svc-tech-body { border: 1px solid rgba(200,200,200,0.14); border-radius: 22px; padding: 32px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.svc-tech-col h3 { font-size: 1.6rem; margin: 0 0 20px; }
.svc-tech-item { display: flex; align-items: center; gap: 16px; border: 1px solid rgba(200,200,200,0.14); border-radius: 14px; padding: 14px 18px; margin-bottom: 12px; color: #E4E4E4; font-weight: 600; }
.svc-tech-item span { color: #8B95A3; font-weight: 700; font-size: 1.3rem; }
.svc-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.svc-faq-item { border: 1px solid rgba(200,200,200,0.14); border-radius: 18px; background: rgba(255,255,255,0.02); padding: 22px 26px; }
.svc-faq-item summary { cursor: pointer; font-size: 1.15rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item p { color: #A7B0BC; margin: 14px 0 0; line-height: 1.7; }
.svc-hero .fadeInDown, .svc-help, .svc-tech, .svc-faq-item, .svc-help-card { animation-duration: .8s; animation-fill-mode: both; }
.svc-help.io-in, .svc-tech.io-in, .svc-faq-item.io-in { animation: fadeInUp .8s both; }
.hp-center-h.io-in { animation: fadeInDown .8s both; }
@media (max-width: 900px) {
  .svc-help { grid-template-columns: 1fr; }
  .svc-help-intro { text-align: left; }
  .svc-help-cards { grid-template-columns: 1fr; }
  .svc-tech { grid-template-columns: 1fr; }
  .svc-tech-body { grid-template-columns: 1fr; }
  .svc-faq-grid { grid-template-columns: 1fr; }
}
.footer-blogs { background: radial-gradient(ellipse 70% 90% at 80% 20%, rgba(123,0,255,0.14), transparent 55%), #000000; border-top: 1px solid rgba(200,200,200,0.12); }
.fb-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 40px; padding: 72px 0 48px; }
.fb-brand .logo-word { font-size: 1.6rem; font-weight: 800; }
.fb-brand p { color: #8B95A3; margin-top: 10px; }
.fb-col h3 { font-size: 1.3rem; margin-bottom: 18px; }
.fb-col a, .fb-col p { display: block; color: #C8C8C8; margin: 8px 0; text-decoration: none; }
.fb-col a:hover { color: #A855F7; }
.fb-social { display: flex; gap: 14px; margin-top: 16px; }
.fb-social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(200,200,200,0.2); border-radius: 50%; color: #E4E4E4; font-size: 0.8rem; }
.fb-social a:hover { border-color: rgba(123,0,255,0.6); color: #A855F7; }
@media (max-width: 900px) { .fb-top { grid-template-columns: 1fr; } }

.join-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; margin-top: 24px; }
.join-form { display: grid; gap: 22px; max-width: 620px; }
.join-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.join-field span { display: block; font-weight: 700; margin-bottom: 10px; font-size: 1rem; }
.join-field span i { color: #7B00FF; font-style: normal; }
.join-field input, .join-field select { width: 100%; border-radius: 12px; border: 1px solid rgba(200,200,200,0.2); background: #111827; color: #E4E4E4; padding: 14px 18px; font-size: 1rem; outline: none; }
.join-field input:focus, .join-field select:focus { border-color: rgba(123,0,255,0.6); }
.join-field input[type="file"] { background: transparent; border: 0; padding: 0; margin-top: 8px; }
.join-visual { position: relative; }
.join-visual::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 70% 30%, rgba(123,0,255,0.25), transparent 55%); }
@media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; } .join-row { grid-template-columns: 1fr; } }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 24px; align-items: start; }
.hp-cases { align-items: start; }
.about-team-grid { align-items: start; }
.work-grid > .work-card:nth-child(3n+2), .hp-cases > .hp-case:nth-child(3n+2), .about-team-grid > .about-team-card:nth-child(3n+2) { margin-top: -30px; }
.work-card { display: block; text-decoration: none; text-align: center; animation-duration: .7s; transform-origin: top center; }
.work-card.io-in { animation: zoomIn .6s both; }
.work-img { aspect-ratio: 4/3; border-radius: 22px; border: 1px solid rgba(200,200,200,0.12); background: linear-gradient(160deg, #000000, #000000); position: relative; overflow: hidden; transition: transform .5s cubic-bezier(0.22,1,0.36,1); }
.work-img::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(123,0,255,0.16), transparent 45%); }
.work-card:hover .work-img { transform: scale(1.03); }
.work-pills { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 16px; }
.work-pills span { border: 1px solid rgba(200,200,200,0.28); border-radius: 999px; padding: 9px 22px; font-size: 0.85rem; color: #E4E4E4; }
.work-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 0; color: #fff; }
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; } .work-grid > .work-card:nth-child(3n+2), .hp-cases > .hp-case:nth-child(3n+2), .about-team-grid > .about-team-card:nth-child(3n+2) { margin-top: 0; } }

.life-hero { min-height: 55vh; display: grid; place-items: center; text-align: center; background: radial-gradient(ellipse 80% 90% at 50% 20%, rgba(123,0,255,0.18), transparent 55%), #000000; border-bottom: 1px solid rgba(200,200,200,0.10); }
.life-hero h1 { font-size: clamp(3.4rem, 9vw, 8rem); font-weight: 800; letter-spacing: -0.04em; margin: 0; animation: fadeInDown .8s both; }
.life-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.life-video-item { aspect-ratio: 4/5; border-radius: 18px; border: 1px solid rgba(200,200,200,0.14); background: linear-gradient(160deg, #000000, #000000); display: grid; place-items: center; position: relative; overflow: hidden; }
.life-video-item::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(123,0,255,0.12), transparent 45%); }
.life-play { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(168,85,247,0.6); display: grid; place-items: center; color: #A855F7; font-size: 1.3rem; }
.life-video-label { position: absolute; bottom: 16px; left: 16px; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #C8C8C8; }
.life-img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.life-img-item { margin: 0; aspect-ratio: 4/5; border-radius: 16px; border: 1px solid rgba(200,200,200,0.12); background: linear-gradient(160deg, #000000, #000000); display: grid; place-items: end center; padding: 14px; }
.life-img-item figcaption { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8B95A3; }
.life-video-item.io-in { animation: fadeInUp .7s both; }
.life-img-item.io-in { animation: zoomIn .6s both; }
@media (max-width: 900px) {
  .life-video-grid { grid-template-columns: 1fr; }
  .life-img-grid { grid-template-columns: repeat(2, 1fr); }
}

.about-hero h1 { animation: fadeInDown .8s both; }
.about-hero-lede { animation: fadeInUp .8s both; }
.about-hero .btn { animation: fadeInUp .8s .15s both; transition-duration:.3s; transition-property:transform; }
.about-hero .btn:active, .about-hero .btn:focus, .about-hero .btn:hover { transform: scale(.9); }
.about-panel.io-in { animation: fadeInUp .8s both; }
.about-offer-grid .about-offer-card.io-in:nth-child(4n+1) { animation: fadeInLeft .8s both; }
.about-offer-grid .about-offer-card.io-in:nth-child(4n+2) { animation: fadeInRight .8s both; }
.about-offer-grid .about-offer-card.io-in:nth-child(4n+3) { animation: fadeInDown .8s both; }
.about-offer-grid .about-offer-card.io-in:nth-child(4n) { animation: fadeInUp .8s both; }
.about-team-sec.io-in { animation: zoomIn .7s both; }
.about-team-sec .about-team-card { animation: none; }
.about-cta-box.io-in { animation: fadeInDown .8s both; }
.hp-why h2.io-in, .hp-why > p.io-in { animation: fadeInDown .8s both; }
.hp-why .bars.io-in { animation: zoomIn .8s both; }
.fadeInDown.io-in { animation: fadeInDown .8s both; }

.about-hero { text-align: center; padding: 90px 24px 60px; background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(123,0,255,0.14), transparent 55%), #000000; border-bottom: 1px solid rgba(200,200,200,0.10); }
.about-hero h1 { font-size: clamp(3rem, 8vw, 7rem); font-weight: 800; letter-spacing: -0.04em; margin: 0 0 28px; }
.about-hero-lede { max-width: 720px; margin: 0 auto 32px; color: #A7B0BC; font-size: 1.05rem; line-height: 1.7; }
.about-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; border: 1px solid rgba(200,200,200,0.14); border-radius: 26px; background: rgba(255,255,255,0.02); padding: 44px 48px; }
.about-panel-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 18px; }
.about-panel-copy p { color: #A7B0BC; line-height: 1.8; margin: 0 0 22px; }
.about-panel-visual { min-height: 320px; border-radius: 18px; border: 1px solid rgba(200,200,200,0.12); background: radial-gradient(circle at 60% 30%, rgba(123,0,255,0.18), transparent 55%), rgba(7,17,31,0.6); display: grid; place-items: center; position: relative; overflow: hidden; }
.about-panel-mark { font-size: clamp(4rem, 8vw, 7rem); font-weight: 800; color: rgba(168,85,247,0.85); letter-spacing: -0.06em; }
.about-offer-grid { display: grid; gap: 20px; }
.about-offer-card { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 40px; align-items: center; border: 1px solid rgba(200,200,200,0.12); border-radius: 22px; background: rgba(255,255,255,0.02); padding: 36px 44px; }
.about-offer-card.alt { grid-template-columns: 1fr 1px 1fr; }
.about-offer-card.alt > div { order: 3; }
.about-offer-card.alt > ul { order: 1; }
.about-offer-card::before { content: ''; width: 1px; height: 70%; background: rgba(200,200,200,0.14); grid-column: 2; }
.about-offer-card h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 0 0 12px; }
.about-offer-card p { color: #A7B0BC; margin: 0; line-height: 1.7; }
.about-offer-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.about-offer-card li { position: relative; padding-left: 18px; color: #E4E4E4; }
.about-offer-card li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: #7B00FF; }
.about-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.about-team-card { border: 1px solid rgba(200,200,200,0.12); border-radius: 22px; background: rgba(255,255,255,0.02); padding: 28px 26px; text-align: center; }
.about-team-card.is-active { border-color: rgba(123,0,255,0.55); background: linear-gradient(180deg, rgba(123,0,255,0.10), rgba(7,17,31,0.7)); }
.about-team-card h3 { margin: 0 0 6px; font-size: 1.35rem; }
.about-team-card p { color: #8B95A3; margin: 0 0 22px; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.about-mission-grid { place-content: center; gap: 24px; align-content: center; }
.about-cta { padding: 80px 24px; }
.about-cta-box { max-width: 980px; margin: 0 auto; text-align: center; border: 1px solid rgba(200,200,200,0.28); border-radius: 26px; padding: clamp(56px, 9vw, 96px) 24px; background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(123,0,255,0.14), transparent 55%), #000000; }
.about-cta-box h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0 0 26px; }
@media (max-width: 900px) {
  .about-panel { grid-template-columns: 1fr; padding: 32px 26px; }
  .about-offer-card, .about-offer-card.alt { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
  .about-offer-card::before { display: none; }
  .about-offer-card.alt > div, .about-offer-card.alt > ul { order: initial; }
  .about-team-grid { grid-template-columns: 1fr; }
}
.hp-final {
  text-align: center;
  padding: clamp(88px, 14vh, 140px) 24px;
  border-top: 1px solid rgba(200,200,200,0.10);
  border-bottom: 1px solid rgba(200,200,200,0.10);
  background:
    radial-gradient(ellipse 60% 80% at 50% 120%, rgba(123, 0, 255, 0.14), transparent 55%),
    #000000;
  position: relative;
}
.hp-final::before {
  content: ''; position: absolute; inset: 20px;
  border: 1px solid rgba(200,200,200,0.28); border-radius: 26px; pointer-events: none;
}
.hp-cta-line {
  display: block; width: min(160px, 36%); height: 1px; margin: 0 auto 28px;
  background: #7B00FF; transform-origin: left center;
}
.hp-final h2 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 0.98; margin: 0 0 28px; }
.hp-final .lede { color: #A7B0BC; max-width: 28ch; margin: 0 auto 28px; }
.vis-web-development { background: linear-gradient(135deg, #0A0A0A, #111111 60%, #2a3b52); }
.vis-software-development { background: linear-gradient(135deg, #111111, #111111 60%, rgba(123,0,255,0.35)); }
.vis-mobile-development { background: linear-gradient(135deg, #000000, #111111 70%, #111111); }
.vis-ui-ux-design { background: linear-gradient(90deg, #0A0A0A, #111111 70%, rgba(168,85,247,0.30)); }
.vis-ai-automation { background: radial-gradient(circle at 70% 40%, rgba(168,85,247,0.35), #0A0A0A 75%); }
.vis-ecommerce { background: linear-gradient(#111111, #111111 70%, rgba(123,0,255,0.4)); }
.vis-cloud-devops { background: linear-gradient(160deg, #000000, #111111 70%, #111111); }
.vis-staff-augmentation { background: linear-gradient(45deg, #0A0A0A 40%, rgba(138,0,255,0.35)); }
.vis-health, .vis-edu, .vis-retail, .vis-ecom, .vis-finance, .vis-estate, .vis-logistics, .vis-mfg, .vis-pro,
.vis-life, .vis-desk, .vis-review, .vis-night, .vis-event, .vis-learn, .vis-craft, .vis-window, .vis-tools, .vis-board, .vis-pause {
  background: linear-gradient(160deg, #0A0A0A, #111111 70%, rgba(123,0,255,0.30));
}

.foot-ref { background: #000000; padding: 64px 6vw 24px; }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.1fr; gap: 32px; max-width: 1240px; margin: 0 auto 28px; }
.foot-grid h3 { font-size: 1rem; margin-bottom: 12px; }
.foot-grid a, .foot-grid p { display: block; color: #8B95A3; margin: 6px 0; }
.foot-grid a:hover { color: #A855F7; }

html.has-gsap .cine-a,
html.has-gsap .cine-b,
html.has-gsap .cine-card-copy,
html.has-gsap .cine-card-stat,
html.has-gsap .cine-card-cta,
html.has-gsap .cine-laptop .lap {
  transform: none;
}
html.has-gsap .cine-a,
html.has-gsap .cine-b {
  opacity: 1;
}
html.has-gsap body.page-home .cine-a .cine-line span,
html.has-gsap body.page-home .cine-laptop,
html.has-gsap body.page-home .cine-card-copy,
html.has-gsap body.page-home .cine-card-stat { animation: none; }

body.page-home .site-nav { animation: fade 0.5s 0.12s both cubic-bezier(0.22,1,0.36,1); }
html:not(.has-gsap) body.page-home .cine-a .cine-line span { animation: clipIn 0.95s both cubic-bezier(0.22,1,0.36,1); }
html:not(.has-gsap) body.page-home .cine-a .cine-line:nth-child(1) span { animation-delay: 0.32s; }
html:not(.has-gsap) body.page-home .cine-a .cine-line:nth-child(2) span { animation-delay: 0.5s; }
html:not(.has-gsap) body.page-home .cine-laptop { animation: rise 1.1s 0.7s both cubic-bezier(0.22,1,0.36,1); }
html:not(.has-gsap) body.page-home .cine-card-copy { animation: fade 0.7s 1.05s both cubic-bezier(0.22,1,0.36,1); }
html:not(.has-gsap) body.page-home .cine-card-stat { animation: fade 0.7s 1.25s both cubic-bezier(0.22,1,0.36,1); }

@keyframes clipIn { from { opacity: 0; transform: translateY(32px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes rise { from { opacity: 0; transform: translateX(-42%) translateY(40px) scale(0.94); } to { opacity: 1; transform: translateX(-42%); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.page-home .section-nav a { font-size: 0.68rem; }

@media (max-width: 1100px) {
  .cine { height: auto; }
  .cine-pin { position: relative; height: auto; min-height: 100vh; padding-bottom: 40px; }
  .cine-type { position: relative; left: auto; top: auto; padding: 8vh 6vw 0; }
  html:not(.has-gsap) .cine-b { display: block; opacity: 1; transform: none; margin-top: 24px; }
  html.has-gsap:not(.reduced-motion) .cine-b {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 0;
    pointer-events: none;
  }
  html:not(.has-gsap) .cine-a, html:not(.has-gsap) .cine-card-copy, html:not(.has-gsap) .cine-card-stat, html:not(.has-gsap) .cine-card-cta { opacity: 1; transform: none; }
  .cine-laptop { position: relative; left: auto; bottom: auto; width: 90%; margin: 24px auto; transform: none; }
  .cine-card { position: relative; right: auto; left: auto; top: auto; bottom: auto; margin: 12px 6vw; max-width: min(280px, calc(100% - 12vw)); }
  .hp-cases { grid-template-columns: 1fr; }
  .hp-quotes-3 { grid-template-columns: 1fr; }
  .hp-quotes-3 blockquote.is-on { transform: none; }
  .hp-world, .hp-services, .hp-tools, .hp-approach, .hp-stats, .hp-quotes, .hp-voice-top, .hp-logos, .foot-grid, .hp-team, .hp-phases, .hp-split, .hp-svc-frame { grid-template-columns: 1fr; }
  .hp-phase { grid-template-columns: 48px 1fr; }
  .hp-phase .shot { display: none; }
  .hp-svc-row { grid-template-columns: 1fr; }
  .hp-svc-frame { min-height: 0; }
  .hp-svc-visuals { min-height: 220px; }
  .hp-svc-grid { grid-template-columns: 1fr; gap: 28px; }
  .hp-svc-head { position: static; max-width: none; text-align: center; }
  .hp-svc-item { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .hp-svc-thumb { height: 200px; }
  .hp-svc-thumb { grid-row: auto; }
  .hp-svc-nav-item { border-left: 2px solid transparent; padding-left: 14px; margin-left: -16px; }
  .hp-svc-nav-item.is-active { border-left-color: #7B00FF; background: linear-gradient(90deg, rgba(123,0,255,0.08), transparent 70%); }
  .hp-svc-nav { padding-left: 14px; }
}

@media (max-width: 700px) {
  .hp-svc-row { grid-template-columns: 1fr; }
  .cine-type { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cine { height: auto; }
  .cine-pin { position: relative; height: auto; overflow: visible; }
  .cine-type { position: relative; left: auto; top: auto; padding: 8vh 6vw 0; }
  .cine-a, .cine-b, .cine-laptop, .cine-card { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cine-b { margin-top: 20px; }
  .tunnel { animation: none; }
}
/* Hero laptop position only */
.cine-laptop {
    top: 100px !important;
}