.smart-services { padding:88px var(--gutter); background:#0a0a0a; border-top:1px solid var(--line); scroll-margin-top:var(--header); }
.smart-services-inner { max-width:1600px; margin:auto; }
.smart-services-intro { display:flex; justify-content:space-between; align-items:end; gap:36px; margin-bottom:40px; }
.smart-services h2 { max-width:15ch; font-size:clamp(34px,3.5vw,52px); line-height:1.13; letter-spacing:-.035em; font-weight:500; }
.smart-services-intro > p { max-width:46ch; color:var(--muted); font-size:16px; line-height:1.7; }
.smart-services-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.service-tabs { border-top:1px solid var(--line); }
.service-tab { position:relative; display:grid; grid-template-columns:1fr 24px; gap:10px 24px; width:100%; text-align:left; padding:24px 0; background:none; border-bottom:1px solid var(--line); }
.service-tab-title { font-size:clamp(20px,1.7vw,26px); font-weight:500; line-height:1.35; letter-spacing:-.02em; }
.service-tab-description { grid-column:1; max-width:48ch; font-size:15px; color:var(--muted); line-height:1.7; }
.service-tab > svg { grid-column:2; grid-row:1; margin-top:5px; color:var(--muted); transition:transform .35s cubic-bezier(.16,1,.3,1),color .2s; }
.service-tab[aria-selected=true] > svg { transform:rotate(-45deg); color:var(--green); }
.service-tab[aria-selected=true] { border-bottom-color:var(--ink); }
.service-tab:hover .service-tab-title { color:var(--green); }
.service-quote { margin-top:28px; }
.service-quote > p { color:var(--muted); font-size:14px; margin-bottom:14px; }
.service-quote .button { min-height:48px; width:100%; justify-content:space-between; font-size:14px; }
.service-stage { min-width:0; background:#141414; border:1px solid var(--line); }
.service-stage-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; border-bottom:1px solid var(--line); font-size:14px; }
.service-stage-header > span:last-child { color:var(--muted); font-size:12px; }
.service-preview { padding:28px 28px 24px; min-height:380px; }
.service-preview h3 { font-size:30px; letter-spacing:-.025em; line-height:1.25; font-weight:500; }
.service-preview-lead { margin-top:8px; color:var(--muted); font-size:14px; }
.english-menu { display:grid; grid-template-columns:1fr 1fr; margin:28px 0 20px; }
.english-menu button { display:flex; flex-direction:column; align-items:start; gap:14px; padding:20px 12px; background:none; border-bottom:1px solid var(--line); text-align:left; font-size:15px; min-height:100px; }
.english-menu button:nth-child(odd) { padding-left:0; border-right:1px solid var(--line); }
.english-menu button:nth-child(even) { padding-left:24px; }
.english-menu svg { width:24px; height:24px; color:var(--green); }
.english-menu button:hover,.english-menu button[aria-pressed=true] { color:var(--green); }
.service-demo-feedback { min-height:48px; color:var(--muted); font-size:14px; line-height:1.6; }
.service-compatibility { font-size:14px; line-height:1.7; color:var(--muted); margin-top:18px; max-width:76ch; }
.service-compatibility strong { color:var(--ink); font-weight:500; }
.charger-scene { display:flex; align-items:center; gap:24px; margin:30px 0; }
.demo-battery { position:relative; display:flex; align-items:stretch; gap:5px; padding:7px; border:2px solid var(--muted); width:136px; height:68px; flex-shrink:0; }
.demo-battery::after { content:""; width:5px; height:24px; background:var(--muted); position:absolute; left:100%; top:20px; }
.demo-battery i { flex:1; background:var(--green); clip-path:inset(100% 0 0); }
.demo-battery i:first-child { clip-path:none; }
.charge-complete .demo-battery i { clip-path:none; }
.is-charging .demo-battery i:not(:first-child) { animation:service-charge .65s cubic-bezier(.16,1,.3,1) both; }
.is-charging .demo-battery i:nth-child(3) { animation-delay:.55s; }
.is-charging .demo-battery i:nth-child(4) { animation-delay:1.1s; }
.smart-services:not(.is-in-view) .demo-battery i,.smart-services.is-page-hidden .demo-battery i { animation-play-state:paused; }
.charger-scene strong { display:block; font-size:20px; font-weight:500; }
.charger-scene p { font-size:14px; color:var(--muted); margin-top:4px; }
.service-demo-action { display:flex; align-items:center; justify-content:center; gap:12px; min-height:46px; padding:12px 18px; background:#202020; border:1px solid #565656; font-size:14px; width:100%; }
.service-demo-action:hover { border-color:var(--ink); }
.charger-preview-note { margin-top:18px; }
.phone-status { margin:22px 0 18px; }
.phone-status > div { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; }
.phone-status dt { color:var(--muted); }
.phone-status dd { margin:0; font-variant-numeric:tabular-nums; text-align:right; }
.phone-status dd.is-active { color:var(--green); }
.phone-demo-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.phone-demo-controls .service-demo-action { flex-direction:column; gap:9px; min-height:80px; padding:12px 6px; }
.phone-demo-status { display:flex; justify-content:space-between; gap:16px; align-items:center; width:100%; min-height:44px; text-decoration:underline; text-underline-offset:4px; font-size:14px; background:none; padding:8px 0; }
.services-discovery { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.services-discovery svg { width:16px; height:16px; }
.smart-services:not(.services-ready) .service-preview + .service-preview { border-top:1px solid var(--line); }
@keyframes service-charge { from { clip-path:inset(100% 0 0); } to { clip-path:inset(0); } }
@media(max-width:1000px) { .smart-services-intro { align-items:start; } .smart-services-layout { gap:32px; } .service-preview { padding:24px 20px; } .service-tab-description { font-size:14px; } }
@media(max-width:700px) {
  .smart-services { padding:56px var(--gutter); }
  .smart-services-intro { display:block; margin-bottom:28px; }
  .smart-services h2 { font-size:36px; max-width:16ch; }
  .smart-services-intro > p { margin-top:18px; font-size:15px; }
  .smart-services-layout { display:flex; flex-direction:column; gap:28px; }
  .service-options { width:100%; display:contents; }
  .service-tabs { width:100%; order:0; }
  .service-tab { padding:20px 0; gap:8px 16px; }
  .service-tab-title { font-size:21px; }
  .service-tab-description { font-size:15px; }
  .services-ready .service-tab[aria-selected=false] .service-tab-description { display:none; }
  .service-companion { width:100%; order:1; }
  .service-quote { width:100%; order:2; margin-top:0; }
  .service-stage-header { padding:16px 20px; gap:8px; }
  .service-stage-header > span:last-child { font-size:11px; }
  .service-preview { padding:24px 20px; min-height:396px; }
  .service-preview h3 { font-size:28px; }
  .charger-scene { gap:20px; }
  .demo-battery { width:112px; height:60px; }
  .demo-battery::after { top:16px; }
  .charger-scene strong { font-size:18px; }
  .service-compatibility { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .smart-services *, .smart-services *::after { animation:none!important; transition:none!important; }
}