/* The public homepage experience is scoped here; store and admin styles stay separate. */
.home-page { overflow-x: clip; background: #080a11; }
.home-page main { overflow: clip; }
.home-page .hero { min-height: 100svh; }
.home-page .hero-content { padding-top: max(170px, 20vh); }
.home-page .hero h1 { max-width: 860px; }
@media (min-width: 761px) and (max-width: 1350px) {
  .home-page .hero h1 { max-width: min(610px, 48vw); font-size: clamp(58px, 5.7vw, 73px); }
}
.home-page .hero-scroll span { animation: home-scroll-nudge 2.2s ease-in-out infinite; }
.home-page .hero-rotation { display: flex; align-items: center; gap: 12px; min-height: 22px; margin-top: 27px; color: #bfb3f5; font-size: 11px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.home-page .hero-rotation::before { content: ''; width: 28px; height: 1px; background: currentColor; }

/* A visible, lightweight scroll stage stands in for the reference's video canvas. */
.home-page .cinema { --scene-progress: 1; position: relative; height: 205svh; isolation: isolate; background: #070914; }
.home-page .cinema-sticky { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: min(7vw, 100px); height: 100svh; min-height: 600px; overflow: hidden; padding: 8vh max(32px, calc((100vw - 1392px)/2)); }
.home-page .cinema-sticky::before { content: ''; position: absolute; inset: -20%; z-index: -2; background: radial-gradient(ellipse at 35% 55%, #5b36df5c, transparent 30%), radial-gradient(ellipse at 80% 30%, #2368d348, transparent 30%), #080a13; transform: scale(calc(.94 + var(--scene-progress)*.16)); }
.home-page .cinema-sticky::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35; background: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 66px 66px; mask-image: radial-gradient(ellipse at center, #000, transparent 72%); }
.home-page .cinema-visual { position: relative; min-width: 0; transform: perspective(1400px) translate3d(0, calc((1 - var(--scene-progress))*7vh), 0) rotateY(calc((1 - var(--scene-progress))*-12deg)) scale(calc(.76 + var(--scene-progress)*.22)); filter: drop-shadow(0 50px 90px #04040eaa); will-change: transform; }
.home-page .cinema-visual::before,
.home-page .cinema-visual::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.home-page .cinema-visual::before { inset: 12% -8%; z-index: -1; background: #5c48ee40; filter: blur(65px); }
.home-page .cinema-visual::after { width: 24%; aspect-ratio: 1; right: -7%; top: -5%; border: 1px solid #bcacff44; box-shadow: 0 0 45px #6b4fff55; }
.home-page .cinema-device { position: relative; width: 100%; aspect-ratio: 1.32; overflow: hidden; border: 10px solid #1e2132; border-bottom-width: 16px; border-radius: 23px; background: #11172e; box-shadow: 0 3px 0 #9d95d3, 0 28px 90px #000b, inset 0 0 0 1px #ffffff26; }
.home-page .cinema-device::before { content: ''; position: absolute; top: 10px; left: 16px; width: 7px; height: 7px; z-index: 5; border-radius: 50%; background: #fa7b8c; box-shadow: 13px 0 #ffc46d, 26px 0 #72d5c5; }
.home-page .cinema-device::after { content: ''; position: absolute; inset: auto 12% -17px; height: 15px; border-radius: 0 0 50% 50%; background: linear-gradient(90deg, #5c6384, #dbd9f0 48%, #5c6384); }
.home-page .cinema-copy { position: relative; z-index: 2; max-width: 570px; opacity: calc(.38 + var(--scene-progress)*.62); transform: translateY(calc((1 - var(--scene-progress))*52px)); }
.home-page .cinema-copy h2 { margin: 18px 0 25px; color: #fff; font-size: clamp(48px, 5.7vw, 89px); font-weight: 390; line-height: .99; letter-spacing: -.075em; }
.home-page .cinema-copy h2 em { color: #b6a3ff; font: inherit; }
.home-page .cinema-copy p:not(.eyebrow) { max-width: 460px; color: #c7c7d7; font-size: clamp(14px, 1.35vw, 18px); line-height: 1.72; }
.home-page .cinema-copy .text-link { display: inline-flex; margin-top: 24px; color: #fff; border-color: #c7baff; }
.home-page .cinema-progress { position: absolute; left: max(32px, calc((100vw - 1392px)/2)); bottom: 7vh; color: #bbb3d9; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.home-page .cinema-progress::before { content: ''; display: inline-block; width: 52px; height: 1px; margin: 0 12px 3px 0; background: #a18af6; transform: scaleX(calc(.3 + var(--scene-progress)*.7)); transform-origin: left; }

/* A large horizontal service gallery with tactile card lighting. */
.home-page .services-section { padding-block: clamp(95px, 12vw, 175px) clamp(95px, 11vw, 150px); background: radial-gradient(circle at 50% 10%, #1b174054, transparent 36%), #090b13; }
.home-page .services-section .section-heading.split { margin-bottom: 72px; }
.home-page .service-carousel { position: relative; }
.home-page .service-carousel-controls { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 20px; }
.home-page [data-carousel-prev], .home-page [data-carousel-next] { display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid #ffffff34; border-radius: 50%; background: #ffffff0c; color: #fff; font-size: 20px; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.home-page [data-carousel-prev]:hover, .home-page [data-carousel-next]:hover { background: #6850d8; border-color: #aa96ff; transform: translateY(-2px); }
.home-page [data-carousel-prev]:disabled, .home-page [data-carousel-next]:disabled { opacity: .4; cursor: default; transform: none; }
.home-page .service-grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; padding: 10px 2px 30px; }
.home-page .service-grid::-webkit-scrollbar { display: none; }
.home-page .service-card { position: relative; flex: 0 0 min(43vw, 580px); min-height: 430px; overflow: hidden; scroll-snap-align: start; isolation: isolate; border-radius: 35px; background: linear-gradient(145deg, #171726, #10111c); }
.home-page .service-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55; background: radial-gradient(430px circle at var(--pointer-x, 65%) var(--pointer-y, 15%), #7e5efe45, transparent 65%); transition: opacity .25s; }
.home-page .service-card:hover::before { opacity: 1; }
.home-page .service-card::after { content: '↗'; position: absolute; top: 29px; right: 34px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff41; border-radius: 50%; color: #fff; font-size: 18px; transition: background .25s, transform .25s; }
.home-page .service-card:hover::after { background: #745be9; transform: rotate(45deg); }
.home-page .service-card .service-icon { margin-top: 55px; }

/* Three editorial story panels. */
.home-page .home-package-teaser, .home-page .theme-teaser, .home-page .showcase-section { padding-bottom: 26px; }
.home-page .home-package-inner, .home-page .theme-teaser-inner, .home-page .showcase { min-height: 620px; border-radius: 46px; }
.home-page .home-package-inner { background: radial-gradient(circle at 25% 100%, #3458d58c, transparent 47%), radial-gradient(circle at 80% 25%, #a45cfa69, transparent 43%), linear-gradient(125deg, #2d0a80, #5425c8 57%, #213cbc); }
.home-page .theme-teaser-inner { background: radial-gradient(circle at 75% 50%, #75bafa80, transparent 37%), linear-gradient(120deg, #1169d7, #132d9a 55%, #3020ab); }
.home-page .showcase { background: #eff2fb; }
.home-page .home-package-teaser h2, .home-page .theme-teaser-copy h2, .home-page .showcase h2 { font-size: clamp(48px, 5.2vw, 76px); line-height: 1.02; }
.home-page .home-package-inner, .home-page .theme-teaser-inner { box-shadow: 0 30px 75px #0003; }
.home-page .theme-teaser-visual { perspective: 1000px; }
.home-page .theme-teaser-visual img { transition: transform .5s ease, filter .5s ease; }
.home-page .theme-teaser-visual:hover img:first-child { transform: rotate(-11deg) translate(-15px, 8px); }
.home-page .theme-teaser-visual:hover img:nth-child(2) { transform: translateY(-22px) scale(1.035); }
.home-page .theme-teaser-visual:hover img:last-child { transform: rotate(11deg) translate(15px, 8px); }
.home-page .showcase-visual img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.home-page .showcase:hover .showcase-visual img { transform: scale(1.055); }

/* Portfolio rhythm without claiming the template examples as client work. */
.home-page .example-section { padding: 115px 0 135px; background: radial-gradient(circle at 55% 5%, #33226445, transparent 38%), #090b13; }
.home-page .example-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 48px; }
.home-page .example-head h2 { max-width: 850px; margin: 14px 0 0; font-size: clamp(48px, 5.3vw, 78px); font-weight: 400; line-height: 1; letter-spacing: -.075em; }
.home-page .example-head h2 em { color: #baa7ff; font: inherit; }
.home-page .example-head .text-link { flex: 0 0 auto; color: #e0d6ff; border-color: #b99fff; }
.home-page .example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 24px; }
.home-page .example-card { display: block; color: #fff; text-decoration: none; }
.home-page .example-card-visual { position: relative; height: clamp(310px, 34vw, 560px); overflow: hidden; isolation: isolate; border: 1px solid #ffffff20; border-radius: 29px; background: #1d2037; }
.home-page .example-card-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .8; background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #a084ff25, transparent 65%), linear-gradient(0deg, #090b1391, transparent 38%); transition: opacity .25s; }
.home-page .example-card:hover .example-card-visual::after { opacity: 1; }
.home-page .example-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(.9) brightness(.77); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.home-page .example-card:hover img { transform: scale(1.06); filter: saturate(1) brightness(.95); }
.home-page .example-card-visual > span { position: absolute; z-index: 2; top: 24px; left: 24px; padding: 9px 13px; border: 1px solid #ffffff74; border-radius: 999px; background: #0b0c1b6b; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); }
.home-page .example-card h3 { margin: 18px 0 4px; font-size: clamp(23px, 2.1vw, 32px); font-weight: 500; letter-spacing: -.045em; }
.home-page .example-card p { margin: 0; color: #adb0c0; font-size: 14px; }

.home-page .keyword-cloud { position: relative; min-height: 575px; overflow: hidden; display: grid; place-items: center; padding: 110px 24px; background: radial-gradient(circle at 50% 50%, #25214890, transparent 37%), #080a11; }
.home-page .keyword-cloud::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 12% 22%, #6145ba27, transparent 20%), radial-gradient(circle at 82% 78%, #2464a727, transparent 22%); }
.home-page .keyword-cloud-inner { position: relative; z-index: 2; width: min(100%, 800px); text-align: center; }
.home-page .keyword-cloud h2 { margin: 0 0 18px; font-size: clamp(45px, 5.5vw, 79px); font-weight: 410; letter-spacing: -.075em; line-height: 1.03; }
.home-page .keyword-cloud p { max-width: 590px; margin: 0 auto 30px; color: #bec0d0; font-size: 16px; line-height: 1.7; }
.home-page .keyword-cloud .button { border-radius: 999px; background: #7154d9; color: #fff; }
.home-page .keyword-cloud .button:hover { background: #8869f0; }
.home-page .keyword-cloud-word { position: absolute; z-index: 1; color: #ffffff19; font-size: clamp(19px, 2.5vw, 38px); font-weight: 650; letter-spacing: -.04em; white-space: nowrap; pointer-events: none; }
.home-page .keyword-cloud-word:nth-of-type(1) { top: 18%; left: 7%; transform: rotate(-9deg); }
.home-page .keyword-cloud-word:nth-of-type(2) { top: 19%; right: 6%; transform: rotate(8deg); }
.home-page .keyword-cloud-word:nth-of-type(3) { bottom: 17%; left: 9%; transform: rotate(7deg); }
.home-page .keyword-cloud-word:nth-of-type(4) { bottom: 15%; right: 8%; transform: rotate(-7deg); }

/* Honest, site-specific numbers and a connected-process visual. */
.home-page .proof-section { padding: 110px 0 125px; background: radial-gradient(circle at 70% 50%, #1b2b6657, transparent 38%), #0c0f1d; }
.home-page .proof-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 65px; }
.home-page .proof-copy h2 { max-width: 670px; margin: 16px 0 20px; font-size: clamp(51px, 5vw, 77px); font-weight: 400; line-height: 1.02; letter-spacing: -.07em; }
.home-page .proof-copy > p:not(.eyebrow) { max-width: 530px; color: #c3c6d8; font-size: 16px; line-height: 1.7; }
.home-page .proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 54px; }
.home-page .proof-grid > div { display: flex; align-items: center; gap: 15px; min-height: 122px; padding: 16px 0; border-bottom: 1px solid #ffffff24; }
.home-page .proof-grid strong { color: #fff; font-size: clamp(58px, 6vw, 88px); font-weight: 360; letter-spacing: -.08em; line-height: 1; }
.home-page .proof-grid span { color: #b6bacd; font-size: 13px; line-height: 1.35; }
.home-page .proof-network { position: relative; display: grid; place-items: center; min-height: 580px; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 50%; background: radial-gradient(circle, #28367a75 0, #111936b5 34%, #0d1228 65%, transparent 69%); box-shadow: inset 0 0 110px #7e72ef24, 0 0 130px #24336638; }
.home-page .proof-network::before, .home-page .proof-network::after { content: ''; position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid #8f9efb45; border-radius: 50%; transform: rotate(-18deg) scaleY(.48); }
.home-page .proof-network::after { width: 95%; transform: rotate(47deg) scaleY(.44); }
.home-page .proof-network-center { position: relative; z-index: 2; display: grid; place-items: center; width: 132px; aspect-ratio: 1; border: 1px solid #b9adff5e; border-radius: 31px; background: #5d4ac2; box-shadow: 0 0 70px #6c5df383; }
.home-page .proof-network-center img { width: 78px; height: 78px; object-fit: contain; filter: brightness(0) invert(1); }
.home-page .proof-network-node { position: absolute; z-index: 3; display: grid; place-items: center; width: 107px; height: 107px; padding: 12px; border: 1px solid #b7c0ff66; border-radius: 50%; background: #161d3dd9; color: #e9eaff; font-size: 12px; text-align: center; box-shadow: 0 15px 35px #0005; }
.home-page .proof-network-node:nth-of-type(2) { top: 12%; left: 14%; }
.home-page .proof-network-node:nth-of-type(3) { top: 16%; right: 11%; }
.home-page .proof-network-node:nth-of-type(4) { bottom: 10%; left: 12%; }
.home-page .proof-network-node:nth-of-type(5) { bottom: 13%; right: 13%; }

.home-page .process-section { padding-block: 125px 145px; }
.home-page .process-grid article { position: relative; overflow: hidden; transition: background .3s, transform .3s; }
.home-page .process-grid article:hover { background: #16172b; transform: translateY(-6px); }
.home-page .process-grid article::after { content: '↗'; position: absolute; right: 25px; top: 25px; color: #ad9bee; font-size: 21px; }
.home-page .about-teaser { padding-bottom: 145px; }
.home-page .about-layout { min-height: 600px; }

.home-page .insight-section { padding: 120px 0; background: radial-gradient(circle at 60% 0%, #241c4c4d, transparent 45%), #090b13; }
.home-page .insight-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.home-page .insight-head h2 { margin: 0; font-size: clamp(47px, 5vw, 72px); font-weight: 410; letter-spacing: -.07em; }
.home-page .insight-head p { margin: 8px 0 0; color: #b2b4c6; }
.home-page .insight-carousel { position: relative; }
.home-page .insight-controls { display: flex; gap: 10px; }
.home-page .insight-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 3px 2px 24px; }
.home-page .insight-track::-webkit-scrollbar { display: none; }
.home-page .insight-card { flex: 0 0 calc((100% - 44px)/3); min-width: 0; scroll-snap-align: start; display: block; color: #fff; text-decoration: none; }
.home-page .insight-card-visual { position: relative; height: 270px; overflow: hidden; border: 1px solid #ffffff24; border-radius: 26px; background: radial-gradient(circle at 75% 20%, #8558e986, transparent 45%), linear-gradient(135deg, #242461, #11173a); }
.home-page .insight-card:nth-child(2) .insight-card-visual { background: radial-gradient(circle at 20% 70%, #3baade91, transparent 47%), linear-gradient(135deg, #182b70, #111c3c); }
.home-page .insight-card:nth-child(3) .insight-card-visual { background: radial-gradient(circle at 85% 60%, #b886e48a, transparent 46%), linear-gradient(135deg, #37245b, #1d1640); }
.home-page .insight-card-visual::before { content: ''; position: absolute; width: 68%; aspect-ratio: 1; left: 16%; top: 23%; border: 1px solid #ffffff58; border-radius: 28%; transform: rotate(-23deg); box-shadow: 30px 30px 0 #ffffff0e, inset 0 0 80px #ffffff20; }
.home-page .insight-card-visual::after { content: '↗'; position: absolute; right: 21px; bottom: 18px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff8e; border-radius: 50%; background: #ffffff18; font-size: 19px; }
.home-page .insight-card-visual > span { position: absolute; z-index: 1; left: 24px; top: 24px; color: #fff; font-size: 11px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.home-page .insight-card h3 { margin: 17px 0 7px; font-size: clamp(21px, 2vw, 29px); font-weight: 500; line-height: 1.2; letter-spacing: -.045em; }
.home-page .insight-card p { margin: 0; color: #b7b9c9; font-size: 13px; line-height: 1.55; }
.home-page .insight-card:hover .insight-card-visual { border-color: #bda7ff; }

@keyframes home-scroll-nudge { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(5px); } }

@media (max-width: 1100px) {
  .home-page .cinema-sticky { gap: 35px; }
  .home-page .cinema-copy h2 { font-size: clamp(45px, 5.5vw, 72px); }
  .home-page .service-card { flex-basis: min(53vw, 550px); }
  .home-page .proof-layout { gap: 30px; }
  .home-page .proof-network { min-height: 480px; }
}
@media (max-width: 760px) {
  .home-page .cinema { height: 160svh; }
  .home-page .cinema-sticky { min-height: 0; grid-template-columns: 1fr; align-content: center; gap: 22px; padding: 9vh 24px; }
  .home-page .cinema-visual { width: min(100%, 540px); margin: 0 auto; }
  .home-page .cinema-device { aspect-ratio: 1.65; }
  .home-page .cinema-copy { max-width: 650px; }
  .home-page .cinema-copy h2 { font-size: clamp(43px, 8vw, 66px); }
  .home-page .cinema-copy p:not(.eyebrow) { font-size: 14px; }
  .home-page .cinema-progress { left: 24px; bottom: 4vh; }
  .home-page .service-card { flex-basis: min(78vw, 550px); }
  .home-page .example-grid { gap: 34px 16px; }
  .home-page .example-card-visual { height: 320px; }
  .home-page .proof-layout { grid-template-columns: 1fr; }
  .home-page .proof-network { width: min(100%, 600px); margin: auto; min-height: 540px; }
  .home-page .insight-card { flex-basis: min(52vw, 360px); }
}
@media (max-width: 560px) {
  .home-page .hero-rotation { font-size: 9px; letter-spacing: .1em; }
  .home-page .cinema { height: 145svh; }
  .home-page .cinema-sticky { padding: 8vh 17px 12vh; }
  .home-page .cinema-copy h2 { margin-block: 13px; font-size: clamp(41px, 10vw, 55px); }
  .home-page .cinema-copy p:not(.eyebrow) { font-size: 13px; }
  .home-page .cinema-device { border-width: 6px; border-bottom-width: 11px; border-radius: 15px; }
  .home-page .cinema-progress { left: 17px; bottom: 4vh; font-size: 8px; }
  .home-page .services-section { padding-block: 80px; }
  .home-page .services-section .section-heading.split { margin-bottom: 25px; }
  .home-page .service-card { flex-basis: 85vw; min-height: 340px; }
  .home-page .service-card .service-icon { margin-top: 25px; }
  .home-page .home-package-inner, .home-page .theme-teaser-inner, .home-page .showcase { min-height: 0; border-radius: 28px; }
  .home-page .home-package-teaser, .home-page .theme-teaser, .home-page .showcase-section { padding-bottom: 18px; }
  .home-page .example-section { padding-block: 80px; }
  .home-page .example-head { display: block; margin-bottom: 30px; }
  .home-page .example-head h2 { font-size: clamp(41px, 10vw, 56px); }
  .home-page .example-head .text-link { display: inline-flex; margin-top: 17px; }
  .home-page .example-grid { grid-template-columns: 1fr; gap: 33px; }
  .home-page .example-card-visual { height: 310px; border-radius: 23px; }
  .home-page .example-card h3 { font-size: 24px; }
  .home-page .keyword-cloud { min-height: 500px; padding-block: 85px; }
  .home-page .keyword-cloud h2 { font-size: clamp(42px, 10vw, 56px); }
  .home-page .keyword-cloud p { font-size: 13px; }
  .home-page .keyword-cloud-word { font-size: 18px; opacity: .55; }
  .home-page .keyword-cloud-word:nth-of-type(1) { top: 7%; left: 4%; }
  .home-page .keyword-cloud-word:nth-of-type(2) { top: 11%; right: 5%; }
  .home-page .keyword-cloud-word:nth-of-type(3) { bottom: 7%; left: 4%; }
  .home-page .keyword-cloud-word:nth-of-type(4) { bottom: 9%; right: 5%; }
  .home-page .proof-section { padding-block: 85px; }
  .home-page .proof-copy h2 { font-size: clamp(45px, 10vw, 62px); }
  .home-page .proof-grid { margin-top: 30px; gap: 0 15px; }
  .home-page .proof-grid > div { min-height: 105px; gap: 9px; }
  .home-page .proof-grid strong { font-size: 54px; }
  .home-page .proof-grid span { font-size: 11px; }
  .home-page .proof-network { min-height: 350px; }
  .home-page .proof-network-center { width: 95px; border-radius: 23px; }
  .home-page .proof-network-center img { width: 60px; height: 60px; }
  .home-page .proof-network-node { width: 75px; height: 75px; font-size: 9px; }
  .home-page .process-section { padding-block: 85px; }
  .home-page .about-teaser { padding-bottom: 90px; }
  .home-page .insight-section { padding-block: 85px; }
  .home-page .insight-head { display: block; margin-bottom: 24px; }
  .home-page .insight-head h2 { font-size: 44px; }
  .home-page .insight-controls { margin-top: 21px; }
  .home-page .insight-card { flex-basis: 85vw; }
  .home-page .insight-card-visual { height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero-scroll span { animation: none; }
  .home-page .cinema { height: auto; }
  .home-page .cinema-sticky { position: relative; height: auto; min-height: 650px; }
  .home-page .cinema-visual, .home-page .cinema-copy { transform: none; opacity: 1; will-change: auto; }
  .home-page .example-card img, .home-page .theme-teaser-visual img, .home-page .showcase-visual img { transition: none; }
}

/* Exact structure of the original ÇAKIR BİLİŞİM content. */

.home-page .cinema-sticky { display: block; padding: 0; }
.home-page .cinema-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: min(7vw, 100px); height: 100%; }
.home-page .cinema-copy { order: 2; }
.home-page .cinema-copy { opacity: calc(.72 + var(--scene-progress)*.28); }
.home-page .cinema-visual { order: 1; }
.home-page .cinema-orbit { position: absolute; z-index: 0; width: min(70vw, 850px); aspect-ratio: 1; border: 1px solid #9a8bef24; border-radius: 50%; transform: rotate(-23deg) scaleY(.54); pointer-events: none; }
.home-page .cinema-orbit-one { left: -14%; top: -16%; }
.home-page .cinema-orbit-two { right: -18%; bottom: -40%; transform: rotate(28deg) scaleY(.48); }
.home-page .cinema-device-top { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-bottom: 1px solid #ffffff1e; background: #171c31; }
.home-page .cinema-device-top i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #b8a4e7; }
.home-page .cinema-device-top i:nth-child(2) { background: #63c4e3; }
.home-page .cinema-device-top i:nth-child(3) { background: #e2a873; }
.home-page .cinema-device-top span { margin-left: auto; color: #a7acc5; font-size: 9px; }
.home-page .cinema-device-screen { height: calc(100% - 30px); padding: clamp(13px, 2vw, 28px); background: radial-gradient(circle at 77% 35%, #7e55e24d, transparent 35%), #10152b; }
.home-page .cinema-device-bar { width: 38%; height: 7px; margin-bottom: 12%; border-radius: 10px; background: linear-gradient(90deg, #9884eb, #ffffff35 30%, #ffffff25 75%); }
.home-page .cinema-device-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 52%; padding: 7%; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 85% 45%, #c18aff84, transparent 28%), linear-gradient(120deg, #312275, #422e9e 62%, #1a3475); }
.home-page .cinema-device-hero::after { content: ''; position: absolute; width: 38%; aspect-ratio: 1; right: 8%; top: 9%; border: 1px solid #ffffff55; border-radius: 24%; transform: rotate(-18deg); box-shadow: 20px 18px 0 #ffffff14, inset 0 0 40px #ffffff2b; }
.home-page .cinema-device-hero span { color: #d6caff; font-size: clamp(7px, .8vw, 11px); font-weight: 650; letter-spacing: .16em; }
.home-page .cinema-device-hero strong { position: relative; z-index: 1; max-width: 60%; margin: 6% 0; color: #fff; font-size: clamp(18px, 2.3vw, 33px); font-weight: 470; line-height: 1.03; letter-spacing: -.05em; }
.home-page .cinema-device-hero i { width: 18%; height: 7%; border-radius: 10px; background: #eeeaff; }
.home-page .cinema-device-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; height: 28%; margin-top: 4%; }
.home-page .cinema-device-tiles b { border: 1px solid #ffffff20; border-radius: 9px; background: linear-gradient(135deg, #4473c8, #252a69 70%); }
.home-page .cinema-device-tiles b:nth-child(2) { background: linear-gradient(135deg, #9c66bd, #35206d 70%); }
.home-page .cinema-device-tiles b:nth-child(3) { background: linear-gradient(135deg, #4e96a7, #223a70 70%); }
.home-page .cinema-float { position: absolute; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 16px; border: 1px solid #ffffff53; border-radius: 13px; background: #252553d9; box-shadow: 0 16px 35px #0006; color: #f8f6ff; font-size: 12px; backdrop-filter: blur(15px); animation: home-float 4s ease-in-out infinite; }
.home-page .cinema-float span { color: #d3c1ff; }
.home-page .cinema-float-one { top: 11%; right: -7%; }
.home-page .cinema-float-two { bottom: 7%; left: -6%; animation-delay: -2s; }
.home-page .cinema-progress { display: flex; align-items: center; width: 150px; }
.home-page .cinema-progress span { display: block; width: 100px; height: 2px; background: #ffffff37; }
.home-page .cinema-progress span::before { content: ''; display: block; width: calc(var(--scene-progress)*100%); height: 100%; background: #b1a0ff; }

.home-page .service-carousel { --carousel-card-width: min(43vw, 580px); }
.home-page .carousel-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; color: #b4b2c7; font-size: 12px; letter-spacing: .05em; }
.home-page .carousel-controls { display: flex; gap: 10px; }

.home-page .story-visual-design { position: relative; min-height: 430px; display: grid; place-items: center; }
.home-page .story-design-board { position: relative; z-index: 1; width: min(100%, 440px); aspect-ratio: 1.1; padding: clamp(24px, 3vw, 42px); overflow: hidden; border: 7px solid #2f225d; border-radius: 30px; background: radial-gradient(circle at 72% 65%, #c8b4ff8f, transparent 40%), linear-gradient(140deg, #271958, #8057eb); box-shadow: 0 30px 80px #0805218c, inset 0 1px #ffffff80; transform: perspective(1000px) rotate(-8deg); }
.home-page .story-design-board::after { content: ''; position: absolute; width: 47%; aspect-ratio: 1; right: -2%; top: 18%; border: 1px solid #ffffff91; border-radius: 34%; transform: rotate(28deg); box-shadow: 20px 18px 0 #ffffff19, inset 0 0 80px #ffffff47; }
.home-page .story-design-board > span { color: #e6dfff; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.home-page .story-design-board > strong { position: relative; z-index: 2; display: block; margin-top: 25%; color: #fff; font-size: clamp(34px, 3.4vw, 53px); font-weight: 440; line-height: 1.03; letter-spacing: -.065em; }
.home-page .story-design-board > i { display: block; width: 36%; height: 13px; margin-top: 24px; border-radius: 10px; background: #dfd4ff; }
.home-page .story-design-board > div { display: flex; gap: 8px; margin-top: 20%; }
.home-page .story-design-board > div b { width: 25%; height: 45px; border-radius: 9px; background: #ffffff40; }
.home-page .story-design-board > div b:nth-child(2) { background: #ffffff64; }
.home-page .story-design-chip { position: absolute; z-index: 3; padding: 14px 19px; border: 1px solid #ffffff80; border-radius: 15px; background: #efecffdf; box-shadow: 0 15px 40px #210f6980; color: #423098; font-size: 13px; font-weight: 650; }
.home-page .chip-one { top: 7%; right: 0; transform: rotate(10deg); }
.home-page .chip-two { left: 2%; bottom: 7%; transform: rotate(-8deg); }
.home-page .story-design-orbit { position: absolute; inset: 12%; border: 1px solid #ffffff4d; border-radius: 50%; transform: rotate(25deg) scaleY(.68); }

.home-page .example-head > p { max-width: 350px; color: #b9b9c8; font-size: 14px; line-height: 1.65; }
.home-page .example-image { position: relative; display: block; height: clamp(310px, 34vw, 560px); overflow: hidden; isolation: isolate; border: 1px solid #ffffff20; border-radius: 29px; background: #1d2037; }
.home-page .example-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #a084ff2b, transparent 65%), linear-gradient(0deg, #080b14ad, transparent 40%); }
.home-page .example-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(.9) brightness(.75); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.home-page .example-card:hover .example-image img { transform: scale(1.06); filter: saturate(1) brightness(.92); }
.home-page .example-meta { display: grid; gap: 4px; padding: 17px 4px 0; }
.home-page .example-meta small { color: #ab9ad4; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.home-page .example-meta strong { font-size: clamp(24px, 2.3vw, 33px); font-weight: 500; letter-spacing: -.045em; }
.home-page .example-meta > span { display: flex; justify-content: space-between; align-items: center; color: #b6b7c6; font-size: 13px; }
.home-page .example-meta b { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffff4e; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 400; }
.home-page .example-bottom { display: flex; justify-content: center; margin-top: 55px; }
.home-page .example-bottom .button { border-radius: 999px; }

.home-page .keyword-cloud-inner { display: grid; place-items: center; min-height: 345px; }
.home-page .keyword-cloud-copy { position: relative; z-index: 2; }
.home-page .keyword-cloud-copy h2 em { color: #b5a1ff; font: inherit; }
.home-page .keyword-cloud-words { position: absolute; inset: -55px -25vw; z-index: 1; pointer-events: none; }
.home-page .keyword-cloud-words span { position: absolute; color: #dcd3ff3b; font-size: clamp(16px, 2.1vw, 32px); font-weight: 600; white-space: nowrap; }
.home-page .keyword-cloud-words span:nth-child(1) { top: 4%; left: 4%; transform: rotate(-9deg); }
.home-page .keyword-cloud-words span:nth-child(2) { top: 7%; right: 4%; transform: rotate(9deg); }
.home-page .keyword-cloud-words span:nth-child(3) { top: 45%; left: -2%; transform: rotate(8deg); }
.home-page .keyword-cloud-words span:nth-child(4) { top: 47%; right: -1%; transform: rotate(-9deg); }
.home-page .keyword-cloud-words span:nth-child(5) { bottom: 3%; left: 11%; transform: rotate(-6deg); }
.home-page .keyword-cloud-words span:nth-child(6) { bottom: 4%; right: 9%; transform: rotate(8deg); }

.home-page .proof-copy h2 em { color: #b3a0ff; font: inherit; }
.home-page .proof-copy .text-link { color: #d9ceff; border-color: #b29cf5; }
.home-page .proof-grid { max-width: 550px; }
.home-page .proof-network-ring { position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid #8f9efb45; border-radius: 50%; transform: rotate(-18deg) scaleY(.48); }
.home-page .proof-network-ring.ring-two { width: 95%; transform: rotate(47deg) scaleY(.44); }
.home-page .proof-network-core { position: relative; z-index: 2; display: grid; place-items: center; width: 132px; aspect-ratio: 1; border: 1px solid #b9adff70; border-radius: 32px; background: #5d4ac2; box-shadow: 0 0 70px #6c5df383; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.05; text-align: center; letter-spacing: -.05em; }
.home-page .proof-network-node.node-design { top: 11%; left: 14%; }
.home-page .proof-network-node.node-content { top: 15%; right: 10%; }
.home-page .proof-network-node.node-store { bottom: 9%; left: 13%; }
.home-page .proof-network-node.node-support { bottom: 12%; right: 12%; }

.home-page .about-layout { grid-template-columns: minmax(0, .55fr) minmax(0, 1.2fr) minmax(0, .45fr); gap: 35px; }
.home-page .about-home-copy { position: relative; z-index: 2; }
.home-page .about-home-copy > p:not(.eyebrow) { max-width: 600px; color: #c9c3d9; font-size: 15px; line-height: 1.75; }
.home-page .about-screen { width: 100%; max-height: 370px; overflow: hidden; border: 5px solid #ffffffbc; border-radius: 19px; box-shadow: 0 25px 65px #0008; transform: rotate(9deg); }
.home-page .about-screen img { display: block; width: 100%; height: 360px; object-fit: cover; object-position: top; }

.home-page .insight-carousel { --carousel-card-width: calc((100% - 44px)/3); }
.home-page .insight-head h2 em { color: #b5a2ff; font: inherit; }
.home-page .insight-head .text-link { color: #d9ceff; border-color: #b29cf5; }
.home-page .insight-art { position: relative; display: block; height: 270px; overflow: hidden; border: 1px solid #ffffff27; border-radius: 26px; background: radial-gradient(circle at 75% 20%, #8558e986, transparent 45%), linear-gradient(135deg, #242461, #11173a); }
.home-page .insight-card:nth-child(2) .insight-art { background: radial-gradient(circle at 20% 70%, #3baade91, transparent 47%), linear-gradient(135deg, #182b70, #111c3c); }
.home-page .insight-card:nth-child(3) .insight-art { background: radial-gradient(circle at 85% 60%, #b886e48a, transparent 46%), linear-gradient(135deg, #37245b, #1d1640); }
.home-page .insight-card:nth-child(4) .insight-art { background: radial-gradient(circle at 70% 35%, #70c4ce81, transparent 44%), linear-gradient(135deg, #193e62, #132048); }
.home-page .insight-card:nth-child(5) .insight-art { background: radial-gradient(circle at 40% 50%, #d092ff70, transparent 46%), linear-gradient(135deg, #412565, #1d1546); }
.home-page .insight-art::before { content: ''; position: absolute; width: 65%; aspect-ratio: 1; left: 18%; top: 17%; border: 1px solid #ffffff63; border-radius: 25%; transform: rotate(-23deg); box-shadow: 27px 27px 0 #ffffff12, inset 0 0 80px #ffffff25; }
.home-page .insight-art b { position: absolute; z-index: 2; left: 11%; top: 36%; color: #fff; font-size: clamp(48px, 5vw, 75px); font-weight: 550; letter-spacing: -.08em; }
.home-page .insight-art i { position: absolute; z-index: 1; width: 25%; height: 15px; left: 13%; bottom: 22%; border-radius: 20px; background: #ffffff87; }
.home-page .insight-art i:last-child { width: 37%; bottom: 14%; opacity: .5; }
.home-page .insight-card small { display: block; margin-top: 16px; color: #b7a9db; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.home-page .insight-card h3 { margin-block: 8px; }
.home-page .insight-arrow { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 17px; border: 1px solid #ffffff54; border-radius: 50%; color: #fff; }

@keyframes home-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 1100px) {
  .home-page .service-carousel { --carousel-card-width: min(53vw, 550px); }
}
@media (max-width: 760px) {
  .home-page .cinema-inner { grid-template-columns: 1fr; align-content: center; gap: 18px; }
  .home-page .cinema-copy { order: 2; }
  .home-page .cinema-visual { order: 1; max-width: 530px; }
  .home-page .service-carousel { --carousel-card-width: min(78vw, 550px); }
  .home-page .about-layout { grid-template-columns: 1fr 1.5fr; }
  .home-page .about-screen { display: none; }
  .home-page .insight-carousel { --carousel-card-width: min(52vw, 360px); }
}
@media (max-width: 560px) {
  .home-page .cinema-inner { width: min(100% - 34px, 1392px); }
  .home-page .cinema-device-top span { font-size: 7px; }
  .home-page .cinema-float { padding: 9px 11px; font-size: 9px; }
  .home-page .cinema-float-one { right: -2%; }
  .home-page .cinema-float-two { left: -1%; }
  .home-page .story-visual-design { min-height: 280px; }
  .home-page .story-design-board { width: min(78%, 320px); padding: 20px; border-width: 5px; border-radius: 20px; }
  .home-page .story-design-board > strong { font-size: 32px; }
  .home-page .story-design-chip { padding: 9px 11px; font-size: 10px; }
  .home-page .example-image { height: 310px; border-radius: 23px; }
  .home-page .keyword-cloud-words { inset: -70px -13vw; }
  .home-page .keyword-cloud-words span { font-size: 14px; }
  .home-page .proof-network-core { width: 95px; border-radius: 24px; font-size: 14px; }
  .home-page .about-layout { grid-template-columns: 1fr; }
  .home-page .insight-carousel { --carousel-card-width: 85vw; }
  .home-page .insight-art { height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .cinema-float { animation: none; }
}