/* Approved blue enamel service icons. Homepage only; no external runtime. */
.services--animated { --hth-ink:#0b1f3f; --hth-muted:#5b6779; --hth-bg:#fbfcfe; --hth-card:#f6f9fc; --hth-border:#e1e9f2; --hth-blue:#087ff5; --hth-amber:#ff8a2f; --hth-flare:#ff8a2f; --hth-body:linear-gradient(145deg,#77c5ff 0%,#248ff3 35%,#0764bf 75%,#063c79 100%); --hth-rim:#087ff5; --hth-edge:#045496; --hth-light:#bce8ff; --hth-metal:linear-gradient(145deg,#f8fdff 0%,#dce9f5 48%,#91acc4 100%); --hth-speed:1; --hth-glow:1; }
  .services--animated .hth-icon { display:block; position:relative; width:104px; height:96px; flex:none; isolation:isolate; }
  .services--animated .hth-object { position:absolute; inset:0; transform-origin:center; transition:transform .25s; }
  .services--animated .hth-shadow { position:absolute; width:70px; height:9px; border-radius:50%; left:17px; bottom:3px; background:radial-gradient(ellipse,#183f6d30,transparent 72%); }
  .services--animated .hth-screen { position:absolute; left:15px; top:14px; width:74px; height:52px; padding:5px; background:var(--hth-body); border-radius:7px 7px 3px 3px; border:1px solid var(--hth-edge); box-shadow:inset 1px 1px 1px #ffffffb0,2px 4px 0 var(--hth-edge),0 6px 8px #174e7920; }
  .services--animated .hth-display { display:block; position:relative; height:100%; overflow:hidden; border-radius:2px; background:linear-gradient(150deg,#12243d,#173f61 55%,#0766a4); box-shadow:inset 0 0 5px #001b35; }
  .services--animated .hth-display::before { content:""; position:absolute; inset:0; background:linear-gradient(125deg,transparent 20%,#ffffff70 48%,transparent 72%); transform:translateX(-120%); }
  .services--animated .hth-screen-lines { position:absolute; inset:8px; }
  .services--animated .hth-terminal-row { position:absolute; left:0; top:calc(var(--hth-row) * 8px); height:2px; width:65%; border-radius:2px; background:#7fcbff70; }
  .services--animated .hth-terminal-row:nth-child(2) { width:90%; }
  .services--animated .hth-terminal-row:nth-child(3) { width:45%; }
  .services--animated .hth-terminal-row:nth-child(4) { width:64%; height:3px; }
  .services--animated .hth-laptop-base { position:absolute; top:68px; left:7px; width:90px; height:12px; background:var(--hth-metal); clip-path:polygon(10% 0,90% 0,100% 65%,97% 100%,3% 100%,0 65%); border-bottom:3px solid #839db7; box-shadow:inset 0 2px 1px #ffffff; }
  .services--animated .hth-laptop-base::after { content:""; position:absolute; width:23px; height:3px; background:#6a8ba9; left:34px; top:2px; border-radius:0 0 3px 3px; }
  .services--animated .hth-chip { position:absolute; left:25px; top:22px; width:54px; height:54px; border-radius:6px; background:var(--hth-body); border:1px solid var(--hth-edge); box-shadow:inset 2px 2px 2px #ffffffa0,3px 4px 0 var(--hth-edge),0 7px 7px #073d6726; }
  .services--animated .hth-chip::before { content:""; position:absolute; inset:11px; border:2px solid #d7efff; border-radius:3px; background:linear-gradient(135deg,#344e69,#10283e); box-shadow:inset 1px 1px 3px #0008; }
  .services--animated .hth-chip-core { position:absolute; inset:20px; border-radius:2px; background:#54b7ff; box-shadow:0 0 5px #40b4ff60; }
  .services--animated .hth-pins { position:absolute; background:repeating-linear-gradient(90deg,#8097af 0 3px,#e1f0ff 3px 5px,transparent 5px 10px); left:30px; width:45px; height:12px; top:11px; filter:drop-shadow(0 1px 0 #5f7c97); }
  .services--animated .hth-pins-bottom { top:77px; }
  .services--animated .hth-pins-left { top:44px; left:-3px; transform:rotate(90deg); }
  .services--animated .hth-pins-right { top:44px; left:63px; transform:rotate(90deg); }
  .services--animated .hth-chip-route { position:absolute; height:3px; width:14px; left:8px; top:47px; border-radius:2px; background:#93badb; box-shadow:74px 0 0 #93badb; }
  .services--animated .hth-controller { --hth-shell-shape:polygon(20% 4%,31% 1%,36% 4%,64% 4%,69% 1%,80% 4%,87% 10%,92% 20%,96% 37%,99% 58%,100% 77%,98% 91%,94% 98%,88% 100%,81% 95%,68% 74%,32% 74%,19% 95%,12% 100%,6% 98%,2% 91%,0 77%,1% 58%,4% 37%,8% 20%,13% 10%); position:absolute; left:2px; top:13px; width:100px; height:74px; transform:rotate(-5deg); filter:drop-shadow(0 3px 0 #044b87) drop-shadow(0 5px 3px #0b2e4f25); }
  .services--animated .hth-controller-shell { position:absolute; inset:0; clip-path:var(--hth-shell-shape); background:linear-gradient(145deg,#9ed4ff 0%,#4d9fe7 12%,#197ccf 44%,#125b9f 74%,#073c70 100%); }
  .services--animated .hth-controller-shell::after { content:""; position:absolute; inset:2px 1px auto; height:13px; background:linear-gradient(180deg,#e8f7ff90,transparent); border-radius:50%; }
  .services--animated .hth-grip { position:absolute; inset:0; background:radial-gradient(circle,#729abb60 .6px,transparent .8px) 0 0 / 2px 2px,linear-gradient(130deg,#254e73,#082d52); }
  .services--animated .hth-grip-left { clip-path:polygon(4% 30%,33% 69%,19% 96%,12% 100%,6% 98%,2% 91%,0 77%,1% 58%); }
  .services--animated .hth-grip-right { clip-path:polygon(96% 30%,67% 69%,81% 96%,88% 100%,94% 98%,98% 91%,100% 77%,99% 58%); }
  .services--animated .hth-bumper { position:absolute; width:22px; height:5px; top:1px; border-radius:5px 5px 1px 1px; background:linear-gradient(#d5e5f1,#476985); z-index:-1; }
  .services--animated .hth-bumper-left { left:17px; transform:rotate(-7deg); }
  .services--animated .hth-bumper-right { right:17px; transform:rotate(7deg); }
  .services--animated .hth-dpad { position:absolute; width:18px; height:18px; left:29px; top:32px; border-radius:50%; background:conic-gradient(from 22.5deg,#f4f8fc 0deg 45deg,#93adc4 45deg 90deg,#c4d5e3 90deg 135deg,#718ea9 135deg 180deg,#abc3d5 180deg 225deg,#e6eef5 225deg 270deg,#859fb6 270deg 315deg,#b5c9d9 315deg 360deg); border:1px solid #365b7b; box-shadow:inset 0 0 2px #ffffffb0,0 2px 1px #062b4e; }
  .services--animated .hth-joystick { position:absolute; width:17px; height:17px; border:2px solid #a4c5dc; border-radius:50%; background:radial-gradient(circle at 40% 35%,#385b79 0%,#183850 60%,#061d31 100%); box-shadow:0 0 0 2px #124c7e,0 3px 2px #062542; }
  .services--animated .hth-joystick::after { content:""; position:absolute; inset:2px; border-radius:50%; border:1px dotted #6185a2; box-shadow:inset 0 1px 2px #001627; }
  .services--animated .hth-stick-left { left:15px; top:13px; }
  .services--animated .hth-stick-right { left:55px; top:32px; }
  .services--animated .hth-game-light { position:absolute; display:grid; place-items:center; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#eaf7ff,#9fbad0 48%,#426584); border:1px solid #234b6f; box-shadow:0 1px 1px #002e60; font:700 4px/1 system-ui,sans-serif; color:#133553; }
  .services--animated .hth-face-y { left:76px; top:10px; --hth-delay:.1s; }
  .services--animated .hth-face-x { left:68px; top:18px; --hth-delay:.45s; }
  .services--animated .hth-face-b { left:84px; top:18px; --hth-delay:.8s; }
  .services--animated .hth-face-a { left:76px; top:26px; --hth-delay:1.15s; }
  .services--animated .hth-home-light { position:absolute; left:47px; top:10px; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 30% 20%,#fff,#d0e9fb 65%,#7caaca); box-shadow:0 0 2px #8ad2ff; }
  .services--animated .hth-menu-dot { position:absolute; top:23px; width:4px; height:4px; border-radius:50%; background:#1d4769; border:1px solid #83b2d3; }
  .services--animated .hth-menu-left { left:41px; }
  .services--animated .hth-menu-right { left:55px; }
  .services--animated .hth-profile-lights { position:absolute; left:49px; top:35px; width:2px; height:2px; border-radius:1px; background:#cae6f7; box-shadow:0 3px 0 #cae6f7,0 6px 0 #cae6f7; }
  .services--animated .hth-wifi-dot { position:absolute; width:10px; height:10px; left:47px; top:73px; border-radius:50%; background:radial-gradient(circle at 30% 20%,#a3d8ff,var(--hth-rim) 65%); box-shadow:0 2px 0 var(--hth-edge); }
  .services--animated .hth-wave { position:absolute; left:50%; border:6px solid var(--hth-rim); border-bottom:0; border-radius:100px 100px 0 0; transform:translateX(-50%); box-shadow:inset 0 2px 1px #ffffff90; filter:drop-shadow(0 2px 0 var(--hth-edge)); }
  .services--animated .hth-wave-small { width:28px; height:14px; top:54px; --hth-delay:.28s; }
  .services--animated .hth-wave-middle { width:50px; height:25px; top:36px; --hth-delay:.62s; }
  .services--animated .hth-wave-large { width:74px; height:37px; top:16px; --hth-delay:.96s; }
  .services--animated .hth-rack { position:absolute; left:18px; top:17px; width:62px; height:68px; border:1px solid var(--hth-edge); border-radius:7px; background:var(--hth-body); padding:6px; box-shadow:inset 1px 2px 1px #ffffffa0,3px 3px 0 var(--hth-edge),0 7px 7px #174e7920; }
  .services--animated .hth-drive { display:block; position:relative; height:14px; border-radius:3px; margin-bottom:6px; background:linear-gradient(180deg,#1d4d79,#123553); border:1px solid #08345d; box-shadow:inset 0 1px 1px #8eb4d05c; }
  .services--animated .hth-drive::before { content:""; width:5px; height:5px; position:absolute; left:5px; top:3px; border-radius:50%; background:#54c5fb; box-shadow:0 0 4px #54c5fb50; }
  .services--animated .hth-drive::after { content:""; position:absolute; right:5px; top:4px; width:17px; height:3px; border-radius:1px; background:repeating-linear-gradient(90deg,#95abc0 0 2px,transparent 2px 4px); }
  .services--animated .hth-drive:nth-child(1) { --hth-delay:.08s; }
  .services--animated .hth-drive:nth-child(2) { --hth-delay:.4s; }
  .services--animated .hth-drive:nth-child(3) { --hth-delay:.72s; }
  .services--animated .hth-tool { position:absolute; right:4px; bottom:8px; width:34px; height:34px; display:grid; place-items:center; background:var(--hth-metal); border-radius:10px; border:1px solid #acbfd1; box-shadow:inset 1px 1px 1px #fff,0 3px 0 #7894b0,0 5px 8px #23476425; color:#195a9a; transform:rotate(8deg); }
  .services--animated .hth-tool svg { width:22px !important; height:22px !important; stroke-width:2; }
  .services--animated .hth-cloud { position:absolute; left:14px; top:23px; width:78px; height:34px; background:var(--hth-body); border:1px solid var(--hth-edge); border-radius:24px; box-shadow:inset 1px 1px 2px #ffffff90,0 4px 0 var(--hth-edge),0 7px 7px #174e7920; }
  .services--animated .hth-cloud::before { content:""; position:absolute; left:13px; top:-18px; width:38px; height:35px; border-radius:50%; background:var(--hth-body); border-top:1px solid var(--hth-light); z-index:-1; }
  .services--animated .hth-cloud::after { content:""; position:absolute; right:7px; top:-8px; width:28px; height:24px; border-radius:50%; background:var(--hth-body); z-index:-1; }
  .services--animated .hth-cloud-base { position:absolute; bottom:6px; width:52px; height:9px; left:26px; border-radius:3px; background:var(--hth-metal); border-bottom:2px solid #89a6c1; }
  .services--animated .hth-upload-track { position:absolute; left:51px; top:61px; height:24px; width:2px; background:#c3d8eb; }
  .services--animated .hth-packet { position:absolute; width:8px; height:11px; color:var(--hth-flare); left:48px; top:74px; opacity:0; font:700 11px/11px ui-monospace,"SFMono-Regular",Consolas,monospace; text-align:center; text-shadow:0 0 calc(3px * var(--hth-glow)) #ff8a2f50; --hth-delay:0s; }
  .services--animated .hth-cloud-mark { position:absolute; z-index:3; left:46px; top:28px; color:#eaf7ff; opacity:.7; font-size:21px; font-weight:700; line-height:1; }

  .services--animated .hth-playing .hth-terminal-row { animation:hth-terminal-flash calc(1.8s * var(--hth-speed)) linear 2; animation-delay:calc(var(--hth-row) * .45s * var(--hth-speed)); }
  .services--animated .hth-playing .hth-display { animation:hth-screen-on calc(2.4s * var(--hth-speed)) ease both; }
  .services--animated .hth-playing .hth-chip-core { animation:hth-core-power calc(2.8s * var(--hth-speed)) ease both; }
  .services--animated .hth-playing .hth-chip-route { animation:hth-lamp calc(2.4s * var(--hth-speed)) ease both; }
  .services--animated .hth-playing .hth-game-light { animation:hth-button-light calc(1.7s * var(--hth-speed)) ease both; animation-delay:calc(var(--hth-delay) * var(--hth-speed)); }
  .services--animated .hth-playing .hth-joystick { animation:hth-stick-nudge calc(2.4s * var(--hth-speed)) ease both; }
  .services--animated .hth-playing .hth-wave { animation:hth-ring-light calc(1.7s * var(--hth-speed)) ease both; animation-delay:calc(var(--hth-delay) * var(--hth-speed)); }
  .services--animated .hth-playing .hth-wifi-dot { animation:hth-lamp calc(1.7s * var(--hth-speed)) ease both; }
  .services--animated .hth-playing .hth-drive::before { animation:hth-lamp calc(1.8s * var(--hth-speed)) ease both; animation-delay:calc(var(--hth-delay) * var(--hth-speed)); }
  .services--animated .hth-playing .hth-tool { animation:hth-tool-turn calc(2.6s * var(--hth-speed)) ease both; }
  .services--animated .hth-playing .hth-packet { animation:hth-data-up calc(1.4s * var(--hth-speed)) linear both; animation-delay:calc(var(--hth-delay) * var(--hth-speed)); }
  .services--animated .hth-playing .hth-cloud-mark { animation:hth-cloud-confirm calc(2.8s * var(--hth-speed)) ease both; }
  @keyframes hth-terminal-flash { 0%,4%{background:#7fcbff70;box-shadow:none} 10%,21%{background:var(--hth-flare);box-shadow:0 0 calc(6px * var(--hth-glow)) var(--hth-flare)} 26%,100%{background:#7fcbff70;box-shadow:none} }
  @keyframes hth-screen-on { 0%{box-shadow:inset 0 0 5px #001b35} 40%,100%{box-shadow:inset 0 0 12px #28a7fa,0 0 9px #44b9ff70;background:linear-gradient(150deg,#123451,#0879bc)} }
  @keyframes hth-lamp { 0%,12%{background:#89b5d5;box-shadow:none} 40%,100%{background:var(--hth-flare);box-shadow:0 0 calc(8px * var(--hth-glow)) var(--hth-flare)} }
  @keyframes hth-core-power { 0%{background:#54b7ff;transform:scale(.75)} 30%{transform:scale(1.1)} 50%,100%{transform:scale(1);background:var(--hth-flare);box-shadow:0 0 calc(15px * var(--hth-glow)) var(--hth-flare)} }
  @keyframes hth-button-light { 0%,5%{background:#bdd2e3;box-shadow:none;transform:translateY(0)} 25%,55%{background:var(--hth-flare);box-shadow:0 0 calc(8px * var(--hth-glow)) var(--hth-flare);transform:translateY(1px)} 80%,100%{background:#e5b780;box-shadow:0 0 2px #ff8a2f80;transform:translateY(0)} }
  @keyframes hth-stick-nudge { 0%,30%,100%{transform:translateX(0)} 40%{transform:translateX(-2px)} 55%{transform:translateX(2px)} 70%{transform:translateX(0)} }
  @keyframes hth-ring-light { 0%,8%{border-color:var(--hth-rim);filter:drop-shadow(0 2px 0 var(--hth-edge))} 40%,70%{border-color:var(--hth-flare);filter:drop-shadow(0 0 calc(5px * var(--hth-glow)) var(--hth-flare))} 100%{border-color:var(--hth-flare);filter:drop-shadow(0 2px 0 #be5c12)} }
  @keyframes hth-tool-turn { 0%,100%{transform:rotate(8deg)} 30%{transform:rotate(-17deg);color:#be5c12} 55%{transform:rotate(14deg);color:#be5c12} 80%{transform:rotate(0deg)} }
  @keyframes hth-data-up { 0%{opacity:0;transform:translateY(0)} 12%{opacity:1} 75%{opacity:1;transform:translateY(-25px)} 100%{opacity:0;transform:translateY(-33px)} }
  @keyframes hth-cloud-confirm { 0%,45%{color:#eaf7ff;transform:translateY(0)} 70%{color:var(--hth-flare);transform:translateY(-2px);text-shadow:0 0 8px var(--hth-flare)} 100%{color:var(--hth-flare);transform:translateY(0);text-shadow:none} }
.services--animated .service-card:not(.service-card--web-design) { padding:0; }
.services--animated .service-card__build-link { min-height:294px; padding:20px 14px 18px; }
.services--animated .service-card__build-link h3 { margin-top:10px; }
.services--animated .service-card__build-link p { margin:8px 0 18px; }
.services--animated .service-card__action { margin-top:auto; min-height:44px; background:transparent; color:var(--navy-text); border:1px solid #cfdceb; box-shadow:none; }
.services--animated .service-card__build-link:is(:hover,:focus-visible) .service-card__action { background:var(--orange); border-color:var(--orange); color:var(--navy-text); box-shadow:none; transform:none; }
.services--animated .service-card:focus-within { border-color:#b8cfe7; box-shadow:0 12px 26px #0b1f3f0d; }
.services--animated .hth-game-light { margin:0; }
@media(max-width:767px) {
  .services--animated .service-card__build-link { padding:18px 10px 16px; min-height:306px; }
  .services--animated .service-card__action { padding:10px 8px; gap:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .services--animated *, .services--animated *::before, .services--animated *::after { animation:none !important; transition:none !important; }
  .services--animated .service-card:hover { transform:none; }
  .services--animated .hth-playing .hth-wave { border-color:var(--hth-flare); }
  .services--animated .hth-playing .hth-terminal-row:last-child,
  .services--animated .hth-playing .hth-chip-core,
  .services--animated .hth-playing .hth-game-light,
  .services--animated .hth-playing .hth-wifi-dot { background:var(--hth-flare); }
}