.features-showcase {
  padding: 105px var(--pad) 100px;
  color: #f6efe4;
  background: radial-gradient(ellipse at 59% 62%, #3c213b 0, #211526 33%, #120e19 70%);
  border-top: 1px solid #c4a77826;
  overflow: hidden;
  scroll-margin-top: 90px;
}
.features-intro { max-width: 1180px; margin: 0 auto 55px; }
.features-intro .eyebrow { color: #d9b77a; }
.features-intro h2 { white-space: pre-line; font-size: clamp(42px,4.4vw,68px); line-height: 1.12; margin: 21px 0; }
html:lang(ta) .features-intro h2 { font-size: clamp(30px,3.4vw,49px); line-height: 1.6; }
.features-intro-text { color: #bcb0bf; font-size: 14px; line-height: 1.8; }
.features-layout { display: grid; grid-template-columns: minmax(190px,.8fr) minmax(340px,1.6fr) minmax(200px,.8fr); align-items: center; max-width: 1400px; margin: auto; gap: 24px; }
.features-navigation { display: grid; gap: 8px; position: relative; z-index: 2; }
.features-navigation button { display: grid; grid-template-columns: 27px 1fr 15px; align-items: center; gap: 11px; width: 100%; padding: 19px 14px; background: transparent; color: #cfc1cf; text-align: left; border: 1px solid #c6a57825; border-radius: 10px; font: inherit; font-size: 13px; line-height: 1.55; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.features-navigation button:hover { background: #d7b87a10; border-color: #c6a57865; }
.features-navigation button[aria-selected="true"] { background: linear-gradient(110deg,#5a3545,#3e2839); color: #fff4df; border-color: #d8b97f9e; transform: translateX(7px); }
.features-navigation button:focus-visible { outline: 2px solid #ead19d; outline-offset: 4px; }
.feature-tab-icon { font-family: ThunaiSymbols,serif; font-size: 23px; color: #d9b77a; text-align: center; }
.feature-tab-arrow { color: #d9b77a; opacity: .4; }
.features-navigation button[aria-selected="true"] .feature-tab-arrow { opacity: 1; }
.features-stage { --feature-x: 0; --feature-y: 0; position: relative; min-height: 610px; perspective: 1100px; }
.features-stage-glow { position: absolute; inset: 8% -5% 6%; background: radial-gradient(ellipse,#d9986840,transparent 64%); pointer-events: none; }
.features-orbit { position: absolute; left: 50%; top: 48%; width: 110%; aspect-ratio: 1; border: 1px solid #d3b27525; border-radius: 50%; transform: translate(-50%,-50%) rotateX(57deg) rotateZ(-28deg); pointer-events: none; }
.features-orbit-inner { width: 88%; border-color: #d3b27548; transform: translate(-50%,-50%) rotateX(63deg) rotateZ(32deg); }
.feature-screen { position: absolute; left: 49%; top: 43%; width: clamp(156px,18vw,222px); aspect-ratio: 360/779; border: 5px solid #2c2030; border-radius: 27px; background: #211726; overflow: hidden; box-shadow: 2px 0 0 #d0a568,10px 12px 0 #1a121e,0 30px 70px #07050b90; }
.feature-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-screen-main { transform: translate(calc(-37% + var(--feature-x) * 17px),calc(-44% + var(--feature-y) * 12px)) rotateY(calc(-13deg + var(--feature-x) * 14deg)) rotateZ(7deg); transition: transform .25s ease-out; }
.feature-screen-back { transform: translate(-98%,-50%) rotateY(14deg) rotateZ(-13deg) scale(.87); opacity: .55; filter: brightness(.77); }
.feature-float { position: absolute; z-index: 3; background: #241929eb; border: 1px solid #d7b77c66; box-shadow: 0 12px 30px #0004; border-radius: 9px; max-width: 64%; padding: 13px 16px; color: #f5dfba; font-size: 11px; line-height: 1.7; }
.feature-float-one { top: 8%; right: 0; transform: translate(calc(var(--feature-x) * -19px),calc(var(--feature-y) * -15px)); }
.feature-float-two { bottom: 13%; left: 0; transform: translate(calc(var(--feature-x) * 23px),calc(var(--feature-y) * 18px)); }
.features-screen-note { position: absolute; bottom: 0; inset-inline: 0; text-align: center; font-size: 10px; color: #a898ac; }
.features-detail { padding-left: 15px; position: relative; z-index: 2; }
.features-preview-status { font-size: 10px; line-height: 1.8; color: #d1ac72; padding-bottom: 15px; border-bottom: 1px solid #cbb18440; }
.features-detail h3 { font-size: clamp(29px,2.6vw,41px); line-height: 1.2; margin: 25px 0 20px; }
html:lang(ta) .features-detail h3 { font-size: clamp(23px,1.9vw,30px); line-height: 1.7; }
.feature-description { color: #bcadbf; font-size: 13px; line-height: 1.95; }
.features-detail .text-link { margin-top: 26px; color: #e6c68d; font-size: 11px; line-height: 1.8; }
.feature-changing .feature-screen-main { animation: feature-screen-arrive .65s cubic-bezier(.16,.7,.25,1) both; }
.feature-changing .feature-screen-back { animation: feature-rear-arrive .7s cubic-bezier(.16,.7,.25,1) both; }
.feature-changing .feature-float { animation: feature-caption-arrive .55s ease both; }
.feature-changing .feature-float-two { animation-delay: .12s; }
.feature-changing .features-detail h3, .feature-changing .feature-description { animation: feature-caption-arrive .45s ease both; }
@keyframes feature-screen-arrive { from { opacity: .1; translate: 55px 30px; rotate: 10deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes feature-rear-arrive { from { opacity: .05; translate: -35px 20px; } to { opacity: .55; translate: 0 0; } }
@keyframes feature-caption-arrive { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media(max-width:1120px) {
  .features-layout { grid-template-columns: 210px minmax(300px,1fr); gap: 25px; }
  .features-detail { grid-column: 1/-1; padding: 15px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; align-items: start; }
  .features-preview-status { grid-column: 1/-1; }
  .features-detail h3 { margin-top: 20px; }
  .feature-description { margin-top: 20px; }
  .features-detail .text-link { grid-column: 2; margin-top: 0; }
  .features-stage { min-height: 550px; }
  .feature-screen { width: 200px; }
}
@media(max-width:800px) {
  .features-showcase { padding-top: 65px; padding-bottom: 65px; }
  .features-intro { margin-bottom: 28px; }
  .features-layout { grid-template-columns: 1fr; gap: 25px; }
  .features-navigation { grid-template-columns: repeat(3,1fr); gap: 7px; }
  .features-navigation button { display: flex; flex-direction: column; gap: 5px; text-align: center; padding: 12px 5px; font-size: 10px; border-radius: 8px; min-height: 74px; }
  .feature-tab-arrow { display: none; }
  .features-navigation button[aria-selected="true"] { transform: none; }
  .feature-tab-icon { font-size: 21px; }
  .features-stage { min-height: 560px; width: min(500px,100%); margin: auto; }
  .features-detail { display: block; grid-column: 1; padding: 0; }
  .features-detail h3 { max-width: 600px; margin: 20px 0 15px; }
  .feature-description { margin-top: 0; }
  .features-detail .text-link { margin-top: 20px; }
}
@media(max-width:480px) {
  .features-intro h2 { font-size: 38px; }
  html:lang(ta) .features-intro h2 { font-size: 27px; }
  .features-intro-text { font-size: 12px; }
  .features-stage { min-height: 455px; }
  .feature-screen { width: 164px; border-width: 4px; border-radius: 22px; }
  .feature-float { font-size: 9px; padding: 9px 10px; }
  .feature-float-one { top: 3%; }
  .feature-float-two { bottom: 11%; }
  .features-detail h3 { font-size: 31px; }
  html:lang(ta) .features-detail h3 { font-size: 25px; }
  .feature-description { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .features-showcase * { animation: none !important; transition: none !important; }
  .feature-screen-main { transform: translate(-37%,-44%) rotateZ(5deg); }
  .feature-float { transform: none; }
}
html[data-motion="off"] .features-showcase * { animation: none !important; transition: none !important; }
html[data-motion="off"] .feature-screen-main { transform: translate(-37%,-44%) rotateZ(5deg); }
html[data-motion="off"] .feature-float { transform: none; }