/* Material – expressive shapes (generated polygons, 120 points each so they can morph) */
:root {
  --sh-circle: polygon(100.0% 50.0%,99.9% 52.6%,99.7% 55.2%,99.4% 57.8%,98.9% 60.4%,98.3% 62.9%,97.6% 65.5%,96.7% 67.9%,95.7% 70.3%,94.6% 72.7%,93.3% 75.0%,91.9% 77.2%,90.5% 79.4%,88.9% 81.5%,87.2% 83.5%,85.4% 85.4%,83.5% 87.2%,81.5% 88.9%,79.4% 90.5%,77.2% 91.9%,75.0% 93.3%,72.7% 94.6%,70.3% 95.7%,67.9% 96.7%,65.5% 97.6%,62.9% 98.3%,60.4% 98.9%,57.8% 99.4%,55.2% 99.7%,52.6% 99.9%,50.0% 100.0%,47.4% 99.9%,44.8% 99.7%,42.2% 99.4%,39.6% 98.9%,37.1% 98.3%,34.5% 97.6%,32.1% 96.7%,29.7% 95.7%,27.3% 94.6%,25.0% 93.3%,22.8% 91.9%,20.6% 90.5%,18.5% 88.9%,16.5% 87.2%,14.6% 85.4%,12.8% 83.5%,11.1% 81.5%,9.5% 79.4%,8.1% 77.2%,6.7% 75.0%,5.4% 72.7%,4.3% 70.3%,3.3% 67.9%,2.4% 65.5%,1.7% 62.9%,1.1% 60.4%,0.6% 57.8%,0.3% 55.2%,0.1% 52.6%,0.0% 50.0%,0.1% 47.4%,0.3% 44.8%,0.6% 42.2%,1.1% 39.6%,1.7% 37.1%,2.4% 34.5%,3.3% 32.1%,4.3% 29.7%,5.4% 27.3%,6.7% 25.0%,8.1% 22.8%,9.5% 20.6%,11.1% 18.5%,12.8% 16.5%,14.6% 14.6%,16.5% 12.8%,18.5% 11.1%,20.6% 9.5%,22.8% 8.1%,25.0% 6.7%,27.3% 5.4%,29.7% 4.3%,32.1% 3.3%,34.5% 2.4%,37.1% 1.7%,39.6% 1.1%,42.2% 0.6%,44.8% 0.3%,47.4% 0.1%,50.0% 0.0%,52.6% 0.1%,55.2% 0.3%,57.8% 0.6%,60.4% 1.1%,62.9% 1.7%,65.5% 2.4%,67.9% 3.3%,70.3% 4.3%,72.7% 5.4%,75.0% 6.7%,77.2% 8.1%,79.4% 9.5%,81.5% 11.1%,83.5% 12.8%,85.4% 14.6%,87.2% 16.5%,88.9% 18.5%,90.5% 20.6%,91.9% 22.8%,93.3% 25.0%,94.6% 27.3%,95.7% 29.7%,96.7% 32.1%,97.6% 34.5%,98.3% 37.1%,98.9% 39.6%,99.4% 42.2%,99.7% 44.8%,99.9% 47.4%);
  --sh-c4: polygon(99.2% 50.0%,99.2% 52.6%,99.3% 55.2%,99.5% 57.8%,99.7% 60.6%,99.9% 63.4%,100.0% 66.2%,100.0% 69.2%,99.9% 72.2%,99.5% 75.2%,98.9% 78.2%,98.1% 81.2%,96.9% 84.1%,95.5% 86.8%,93.7% 89.4%,91.7% 91.7%,89.4% 93.7%,86.8% 95.5%,84.1% 96.9%,81.2% 98.1%,78.2% 98.9%,75.2% 99.5%,72.2% 99.9%,69.2% 100.0%,66.2% 100.0%,63.4% 99.9%,60.6% 99.7%,57.8% 99.5%,55.2% 99.3%,52.6% 99.2%,50.0% 99.2%,47.4% 99.2%,44.8% 99.3%,42.2% 99.5%,39.4% 99.7%,36.6% 99.9%,33.8% 100.0%,30.8% 100.0%,27.8% 99.9%,24.8% 99.5%,21.8% 98.9%,18.8% 98.1%,15.9% 96.9%,13.2% 95.5%,10.6% 93.7%,8.3% 91.7%,6.3% 89.4%,4.5% 86.8%,3.1% 84.1%,1.9% 81.2%,1.1% 78.2%,0.5% 75.2%,0.1% 72.2%,0.0% 69.2%,0.0% 66.2%,0.1% 63.4%,0.3% 60.6%,0.5% 57.8%,0.7% 55.2%,0.8% 52.6%,0.8% 50.0%,0.8% 47.4%,0.7% 44.8%,0.5% 42.2%,0.3% 39.4%,0.1% 36.6%,0.0% 33.8%,0.0% 30.8%,0.1% 27.8%,0.5% 24.8%,1.1% 21.8%,1.9% 18.8%,3.1% 15.9%,4.5% 13.2%,6.3% 10.6%,8.3% 8.3%,10.6% 6.3%,13.2% 4.5%,15.9% 3.1%,18.8% 1.9%,21.8% 1.1%,24.8% 0.5%,27.8% 0.1%,30.8% 0.0%,33.8% 0.0%,36.6% 0.1%,39.4% 0.3%,42.2% 0.5%,44.8% 0.7%,47.4% 0.8%,50.0% 0.8%,52.6% 0.8%,55.2% 0.7%,57.8% 0.5%,60.6% 0.3%,63.4% 0.1%,66.2% 0.0%,69.2% 0.0%,72.2% 0.1%,75.2% 0.5%,78.2% 1.1%,81.2% 1.9%,84.1% 3.1%,86.8% 4.5%,89.4% 6.3%,91.7% 8.3%,93.7% 10.6%,95.5% 13.2%,96.9% 15.9%,98.1% 18.8%,98.9% 21.8%,99.5% 24.8%,99.9% 27.8%,100.0% 30.8%,100.0% 33.8%,99.9% 36.6%,99.7% 39.4%,99.5% 42.2%,99.3% 44.8%,99.2% 47.4%);
  --sh-c6: polygon(100.0% 50.0%,99.8% 52.6%,99.1% 55.2%,98.1% 57.6%,96.7% 59.9%,95.1% 62.1%,93.5% 64.1%,91.8% 66.1%,90.3% 67.9%,88.9% 69.8%,87.6% 71.7%,86.6% 73.8%,85.7% 75.9%,84.8% 78.2%,84.0% 80.6%,83.0% 83.0%,81.9% 85.5%,80.6% 87.8%,79.0% 89.9%,77.1% 91.8%,75.0% 93.3%,72.6% 94.4%,70.1% 95.1%,67.4% 95.4%,64.8% 95.4%,62.1% 95.1%,59.5% 94.7%,57.0% 94.3%,54.6% 93.8%,52.3% 93.6%,50.0% 93.5%,47.7% 93.6%,45.4% 93.8%,43.0% 94.3%,40.5% 94.7%,37.9% 95.1%,35.2% 95.4%,32.6% 95.4%,29.9% 95.1%,27.4% 94.4%,25.0% 93.3%,22.9% 91.8%,21.0% 89.9%,19.4% 87.8%,18.1% 85.5%,17.0% 83.0%,16.0% 80.6%,15.2% 78.2%,14.3% 75.9%,13.4% 73.8%,12.4% 71.7%,11.1% 69.8%,9.7% 67.9%,8.2% 66.1%,6.5% 64.1%,4.9% 62.1%,3.3% 59.9%,1.9% 57.6%,0.9% 55.2%,0.2% 52.6%,0.0% 50.0%,0.2% 47.4%,0.9% 44.8%,1.9% 42.4%,3.3% 40.1%,4.9% 37.9%,6.5% 35.9%,8.2% 33.9%,9.7% 32.1%,11.1% 30.2%,12.4% 28.3%,13.4% 26.2%,14.3% 24.1%,15.2% 21.8%,16.0% 19.4%,17.0% 17.0%,18.1% 14.5%,19.4% 12.2%,21.0% 10.1%,22.9% 8.2%,25.0% 6.7%,27.4% 5.6%,29.9% 4.9%,32.6% 4.6%,35.2% 4.6%,37.9% 4.9%,40.5% 5.3%,43.0% 5.7%,45.4% 6.2%,47.7% 6.4%,50.0% 6.5%,52.3% 6.4%,54.6% 6.2%,57.0% 5.7%,59.5% 5.3%,62.1% 4.9%,64.8% 4.6%,67.4% 4.6%,70.1% 4.9%,72.6% 5.6%,75.0% 6.7%,77.1% 8.2%,79.0% 10.1%,80.6% 12.2%,81.9% 14.5%,83.0% 17.0%,84.0% 19.4%,84.8% 21.8%,85.7% 24.1%,86.6% 26.2%,87.6% 28.3%,88.9% 30.2%,90.3% 32.1%,91.8% 33.9%,93.5% 35.9%,95.1% 37.9%,96.7% 40.1%,98.1% 42.4%,99.1% 44.8%,99.8% 47.4%);
  --sh-c9: polygon(100.0% 50.0%,99.6% 52.6%,98.6% 55.1%,97.0% 57.4%,95.3% 59.6%,93.6% 61.7%,92.3% 63.7%,91.4% 65.9%,91.0% 68.3%,90.9% 70.8%,90.9% 73.6%,90.6% 76.4%,90.0% 79.1%,88.8% 81.4%,87.1% 83.4%,84.8% 84.8%,82.1% 85.7%,79.4% 86.3%,76.7% 86.8%,74.3% 87.4%,72.2% 88.4%,70.3% 89.8%,68.5% 91.6%,66.7% 93.6%,64.8% 95.7%,62.7% 97.5%,60.4% 98.8%,57.8% 99.4%,55.2% 99.2%,52.5% 98.4%,50.0% 97.2%,47.6% 95.8%,45.3% 94.6%,43.1% 93.8%,40.8% 93.5%,38.3% 93.6%,35.7% 94.0%,32.9% 94.5%,30.1% 94.6%,27.4% 94.3%,25.0% 93.3%,22.9% 91.7%,21.3% 89.5%,20.0% 87.0%,19.0% 84.4%,18.1% 81.9%,16.9% 79.8%,15.5% 77.9%,13.7% 76.4%,11.5% 75.0%,9.1% 73.6%,6.8% 72.0%,4.8% 70.1%,3.4% 67.9%,2.6% 65.4%,2.5% 62.7%,3.0% 60.0%,3.8% 57.3%,4.7% 54.8%,5.4% 52.3%,5.7% 50.0%,5.4% 47.7%,4.7% 45.2%,3.8% 42.7%,3.0% 40.0%,2.5% 37.3%,2.6% 34.6%,3.4% 32.1%,4.8% 29.9%,6.8% 28.0%,9.1% 26.4%,11.5% 25.0%,13.7% 23.6%,15.5% 22.1%,16.9% 20.2%,18.1% 18.1%,19.0% 15.6%,20.0% 13.0%,21.3% 10.5%,22.9% 8.3%,25.0% 6.7%,27.4% 5.7%,30.1% 5.4%,32.9% 5.5%,35.7% 6.0%,38.3% 6.4%,40.8% 6.5%,43.1% 6.2%,45.3% 5.4%,47.6% 4.2%,50.0% 2.8%,52.5% 1.6%,55.2% 0.8%,57.8% 0.6%,60.4% 1.2%,62.7% 2.5%,64.8% 4.3%,66.7% 6.4%,68.5% 8.4%,70.3% 10.2%,72.2% 11.6%,74.3% 12.6%,76.7% 13.2%,79.4% 13.7%,82.1% 14.3%,84.8% 15.2%,87.1% 16.6%,88.8% 18.6%,90.0% 20.9%,90.6% 23.6%,90.9% 26.4%,90.9% 29.2%,91.0% 31.7%,91.4% 34.1%,92.3% 36.3%,93.6% 38.3%,95.3% 40.4%,97.0% 42.6%,98.6% 44.9%,99.6% 47.4%);
  --sh-c12: polygon(100.0% 50.0%,99.5% 52.6%,98.2% 55.1%,96.6% 57.4%,95.1% 59.6%,94.1% 61.8%,93.8% 64.2%,94.0% 66.9%,94.3% 69.7%,94.2% 72.5%,93.3% 75.0%,91.6% 77.0%,89.2% 78.5%,86.7% 79.7%,84.3% 80.9%,82.3% 82.3%,80.9% 84.3%,79.7% 86.7%,78.5% 89.2%,77.0% 91.6%,75.0% 93.3%,72.5% 94.2%,69.7% 94.3%,66.9% 94.0%,64.2% 93.8%,61.8% 94.1%,59.6% 95.1%,57.4% 96.6%,55.1% 98.2%,52.6% 99.5%,50.0% 100.0%,47.4% 99.5%,44.9% 98.2%,42.6% 96.6%,40.4% 95.1%,38.2% 94.1%,35.8% 93.8%,33.1% 94.0%,30.3% 94.3%,27.5% 94.2%,25.0% 93.3%,23.0% 91.6%,21.5% 89.2%,20.3% 86.7%,19.1% 84.3%,17.7% 82.3%,15.7% 80.9%,13.3% 79.7%,10.8% 78.5%,8.4% 77.0%,6.7% 75.0%,5.8% 72.5%,5.7% 69.7%,6.0% 66.9%,6.2% 64.2%,5.9% 61.8%,4.9% 59.6%,3.4% 57.4%,1.8% 55.1%,0.5% 52.6%,0.0% 50.0%,0.5% 47.4%,1.8% 44.9%,3.4% 42.6%,4.9% 40.4%,5.9% 38.2%,6.2% 35.8%,6.0% 33.1%,5.7% 30.3%,5.8% 27.5%,6.7% 25.0%,8.4% 23.0%,10.8% 21.5%,13.3% 20.3%,15.7% 19.1%,17.7% 17.7%,19.1% 15.7%,20.3% 13.3%,21.5% 10.8%,23.0% 8.4%,25.0% 6.7%,27.5% 5.8%,30.3% 5.7%,33.1% 6.0%,35.8% 6.2%,38.2% 5.9%,40.4% 4.9%,42.6% 3.4%,44.9% 1.8%,47.4% 0.5%,50.0% 0.0%,52.6% 0.5%,55.1% 1.8%,57.4% 3.4%,59.6% 4.9%,61.8% 5.9%,64.2% 6.2%,66.9% 6.0%,69.7% 5.7%,72.5% 5.8%,75.0% 6.7%,77.0% 8.4%,78.5% 10.8%,79.7% 13.3%,80.9% 15.7%,82.3% 17.7%,84.3% 19.1%,86.7% 20.3%,89.2% 21.5%,91.6% 23.0%,93.3% 25.0%,94.2% 27.5%,94.3% 30.3%,94.0% 33.1%,93.8% 35.8%,94.1% 38.2%,95.1% 40.4%,96.6% 42.6%,98.2% 44.9%,99.5% 47.4%);
  --sh-clover: polygon(100.0% 50.0%,99.7% 52.6%,99.0% 55.1%,97.7% 57.6%,96.0% 59.8%,93.9% 61.8%,91.6% 63.5%,89.1% 65.0%,86.6% 66.3%,84.0% 67.3%,81.6% 68.2%,79.3% 69.0%,77.3% 69.8%,75.4% 70.6%,73.9% 71.5%,72.6% 72.6%,71.5% 73.9%,70.6% 75.4%,69.8% 77.3%,69.0% 79.3%,68.2% 81.6%,67.3% 84.0%,66.3% 86.6%,65.0% 89.1%,63.5% 91.6%,61.8% 93.9%,59.8% 96.0%,57.6% 97.7%,55.1% 99.0%,52.6% 99.7%,50.0% 100.0%,47.4% 99.7%,44.9% 99.0%,42.4% 97.7%,40.2% 96.0%,38.2% 93.9%,36.5% 91.6%,35.0% 89.1%,33.7% 86.6%,32.7% 84.0%,31.8% 81.6%,31.0% 79.3%,30.2% 77.3%,29.4% 75.4%,28.5% 73.9%,27.4% 72.6%,26.1% 71.5%,24.6% 70.6%,22.7% 69.8%,20.7% 69.0%,18.4% 68.2%,16.0% 67.3%,13.4% 66.3%,10.9% 65.0%,8.4% 63.5%,6.1% 61.8%,4.0% 59.8%,2.3% 57.6%,1.0% 55.1%,0.3% 52.6%,0.0% 50.0%,0.3% 47.4%,1.0% 44.9%,2.3% 42.4%,4.0% 40.2%,6.1% 38.2%,8.4% 36.5%,10.9% 35.0%,13.4% 33.7%,16.0% 32.7%,18.4% 31.8%,20.7% 31.0%,22.7% 30.2%,24.6% 29.4%,26.1% 28.5%,27.4% 27.4%,28.5% 26.1%,29.4% 24.6%,30.2% 22.7%,31.0% 20.7%,31.8% 18.4%,32.7% 16.0%,33.7% 13.4%,35.0% 10.9%,36.5% 8.4%,38.2% 6.1%,40.2% 4.0%,42.4% 2.3%,44.9% 1.0%,47.4% 0.3%,50.0% 0.0%,52.6% 0.3%,55.1% 1.0%,57.6% 2.3%,59.8% 4.0%,61.8% 6.1%,63.5% 8.4%,65.0% 10.9%,66.3% 13.4%,67.3% 16.0%,68.2% 18.4%,69.0% 20.7%,69.8% 22.7%,70.6% 24.6%,71.5% 26.1%,72.6% 27.4%,73.9% 28.5%,75.4% 29.4%,77.3% 30.2%,79.3% 31.0%,81.6% 31.8%,84.0% 32.7%,86.6% 33.7%,89.1% 35.0%,91.6% 36.5%,93.9% 38.2%,96.0% 40.2%,97.7% 42.4%,99.0% 44.9%,99.7% 47.4%);
  --sh-burst: polygon(100.0% 50.0%,99.4% 52.6%,97.8% 55.0%,95.5% 57.2%,92.7% 59.1%,90.0% 60.7%,87.7% 62.2%,86.1% 63.8%,85.3% 65.7%,85.3% 68.0%,85.8% 70.7%,86.6% 73.8%,87.2% 77.1%,87.4% 80.3%,86.8% 83.1%,85.4% 85.4%,83.1% 86.8%,80.3% 87.4%,77.1% 87.2%,73.8% 86.6%,70.7% 85.8%,68.0% 85.3%,65.7% 85.3%,63.8% 86.1%,62.2% 87.7%,60.7% 90.0%,59.1% 92.7%,57.2% 95.5%,55.0% 97.8%,52.6% 99.4%,50.0% 100.0%,47.4% 99.4%,45.0% 97.8%,42.8% 95.5%,40.9% 92.7%,39.3% 90.0%,37.8% 87.7%,36.2% 86.1%,34.3% 85.3%,32.0% 85.3%,29.3% 85.8%,26.2% 86.6%,22.9% 87.2%,19.7% 87.4%,16.9% 86.8%,14.6% 85.4%,13.2% 83.1%,12.6% 80.3%,12.8% 77.1%,13.4% 73.8%,14.2% 70.7%,14.7% 68.0%,14.7% 65.7%,13.9% 63.8%,12.3% 62.2%,10.0% 60.7%,7.3% 59.1%,4.5% 57.2%,2.2% 55.0%,0.6% 52.6%,0.0% 50.0%,0.6% 47.4%,2.2% 45.0%,4.5% 42.8%,7.3% 40.9%,10.0% 39.3%,12.3% 37.8%,13.9% 36.2%,14.7% 34.3%,14.7% 32.0%,14.2% 29.3%,13.4% 26.2%,12.8% 22.9%,12.6% 19.7%,13.2% 16.9%,14.6% 14.6%,16.9% 13.2%,19.7% 12.6%,22.9% 12.8%,26.2% 13.4%,29.3% 14.2%,32.0% 14.7%,34.3% 14.7%,36.2% 13.9%,37.8% 12.3%,39.3% 10.0%,40.9% 7.3%,42.8% 4.5%,45.0% 2.2%,47.4% 0.6%,50.0% 0.0%,52.6% 0.6%,55.0% 2.2%,57.2% 4.5%,59.1% 7.3%,60.7% 10.0%,62.2% 12.3%,63.8% 13.9%,65.7% 14.7%,68.0% 14.7%,70.7% 14.2%,73.8% 13.4%,77.1% 12.8%,80.3% 12.6%,83.1% 13.2%,85.4% 14.6%,86.8% 16.9%,87.4% 19.7%,87.2% 22.9%,86.6% 26.2%,85.8% 29.3%,85.3% 32.0%,85.3% 34.3%,86.1% 36.2%,87.7% 37.8%,90.0% 39.3%,92.7% 40.9%,95.5% 42.8%,97.8% 45.0%,99.4% 47.4%);
  --sh-sq: polygon(100.0% 50.0%,100.0% 63.5%,99.9% 68.3%,99.7% 71.9%,99.5% 74.9%,99.2% 77.4%,98.9% 79.7%,98.5% 81.7%,98.0% 83.5%,97.5% 85.2%,96.9% 86.7%,96.2% 88.2%,95.5% 89.5%,94.7% 90.7%,93.8% 91.8%,92.9% 92.9%,91.8% 93.8%,90.7% 94.7%,89.5% 95.5%,88.2% 96.2%,86.7% 96.9%,85.2% 97.5%,83.5% 98.0%,81.7% 98.5%,79.7% 98.9%,77.4% 99.2%,74.9% 99.5%,71.9% 99.7%,68.3% 99.9%,63.5% 100.0%,50.0% 100.0%,36.5% 100.0%,31.7% 99.9%,28.1% 99.7%,25.1% 99.5%,22.6% 99.2%,20.3% 98.9%,18.3% 98.5%,16.5% 98.0%,14.8% 97.5%,13.3% 96.9%,11.8% 96.2%,10.5% 95.5%,9.3% 94.7%,8.2% 93.8%,7.1% 92.9%,6.2% 91.8%,5.3% 90.7%,4.5% 89.5%,3.8% 88.2%,3.1% 86.7%,2.5% 85.2%,2.0% 83.5%,1.5% 81.7%,1.1% 79.7%,0.8% 77.4%,0.5% 74.9%,0.3% 71.9%,0.1% 68.3%,0.0% 63.5%,0.0% 50.0%,0.0% 36.5%,0.1% 31.7%,0.3% 28.1%,0.5% 25.1%,0.8% 22.6%,1.1% 20.3%,1.5% 18.3%,2.0% 16.5%,2.5% 14.8%,3.1% 13.3%,3.8% 11.8%,4.5% 10.5%,5.3% 9.3%,6.2% 8.2%,7.1% 7.1%,8.2% 6.2%,9.3% 5.3%,10.5% 4.5%,11.8% 3.8%,13.3% 3.1%,14.8% 2.5%,16.5% 2.0%,18.3% 1.5%,20.3% 1.1%,22.6% 0.8%,25.1% 0.5%,28.1% 0.3%,31.7% 0.1%,36.5% 0.0%,50.0% 0.0%,63.5% 0.0%,68.3% 0.1%,71.9% 0.3%,74.9% 0.5%,77.4% 0.8%,79.7% 1.1%,81.7% 1.5%,83.5% 2.0%,85.2% 2.5%,86.7% 3.1%,88.2% 3.8%,89.5% 4.5%,90.7% 5.3%,91.8% 6.2%,92.9% 7.1%,93.8% 8.2%,94.7% 9.3%,95.5% 10.5%,96.2% 11.8%,96.9% 13.3%,97.5% 14.8%,98.0% 16.5%,98.5% 18.3%,98.9% 20.3%,99.2% 22.6%,99.5% 25.1%,99.7% 28.1%,99.9% 31.7%,100.0% 36.5%);
}

/* Material 3 Expressive – tonal palette from a warm violet seed. */
:root {
  --primary: #6c3fa3;
  --on-primary: #ffffff;
  --primary-container: #f0dbff;
  --on-primary-container: #2b0a4c;
  --secondary: #66596f;
  --secondary-container: #eedcf6;
  --on-secondary-container: #22172a;
  --tertiary: #984059;
  --tertiary-container: #ffd9e1;
  --on-tertiary-container: #3f0019;
  --surface: #fff7fd;
  --surface-low: #fbf0fb;
  --surface-c: #f6eaf6;
  --surface-high: #f0e4f1;
  --surface-highest: #eadeeb;
  --on-surface: #1f1a22;
  --on-surface-v: #4d4454;
  --outline: #7e7485;
  --outline-v: #d0c3d6;
  --bg: var(--surface);
  --ink: var(--on-surface);
  --ink-2: var(--on-surface-v);
  --line: var(--outline-v);
  --accent: var(--primary);
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --max: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
}

body { font-size: 1.0625rem; line-height: 1.6; background: var(--surface); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
p, li, dd { hyphens: auto; }
svg { flex: none; }

/* ---------- Top app bar ---------- */
.m3-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--surface-c) 88%, transparent);
  backdrop-filter: blur(12px);
}
.m3-brand { display: flex; align-items: center; gap: 0.8rem; margin-right: auto; text-decoration: none; }
.m3-brand__logo {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 1.25rem;
  clip-path: var(--sh-c9); transition: clip-path .6s var(--ease), rotate .6s var(--ease);
}
.m3-brand:hover .m3-brand__logo { clip-path: var(--sh-c12); rotate: 30deg; }
.m3-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.m3-brand__name { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }
.m3-brand__sub { font-size: 0.8rem; color: var(--on-surface-v); }
.m3-nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-highest); }
.m3-nav a { padding: 0.55rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--on-surface-v); transition: background-color .3s var(--ease), color .3s var(--ease), border-radius .3s var(--ease); }
.m3-nav a:hover { background: var(--secondary-container); color: var(--on-secondary-container); border-radius: 12px; }
.m3-lang { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--primary-container); color: var(--on-primary-container); text-decoration: none; font-weight: 700; font-size: 0.9rem; transition: border-radius .3s var(--ease); }
.m3-lang svg { width: 20px; height: 20px; }
.m3-lang:hover { border-radius: 12px; }

/* ---------- Type scale ---------- */
.m3-display { font-size: clamp(2.8rem, 6.6vw, 6.2rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; }
.m3-headline { font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
.m3-title-l { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.6rem; }
.m3-title-m { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 0.4rem; }
.m3-meta { font-size: 0.92rem; font-weight: 600; margin-top: 0.9rem; opacity: 0.85; }

/* ---------- Buttons & chips ---------- */
.m3-fab {
  display: inline-flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 26px 0 22px; border-radius: 20px;
  background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 1.1rem; text-decoration: none;
  box-shadow: 0 6px 14px -4px rgba(108, 63, 163, 0.45), 0 2px 4px rgba(0, 0, 0, 0.12);
  transition: border-radius .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
}
.m3-fab svg { width: 24px; height: 24px; }
.m3-fab:hover { border-radius: 32px; background: #5d3292; box-shadow: 0 10px 22px -6px rgba(108, 63, 163, 0.55); }
.m3-fab--tertiary { background: var(--tertiary); box-shadow: 0 6px 14px -4px rgba(152, 64, 89, 0.45); }
.m3-fab--tertiary:hover { background: #82334b; }
.m3-tonal { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; border-radius: 28px; background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 700; text-decoration: none; transition: border-radius .3s var(--ease); }
.m3-tonal svg { width: 20px; height: 20px; }
.m3-tonal:hover { border-radius: 14px; }
.m3-text-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.1rem; height: 44px; padding: 0 20px; border-radius: 22px; font-weight: 700; text-decoration: none; background: rgba(255, 255, 255, 0.6); color: inherit; transition: border-radius .3s var(--ease), background-color .3s; }
.m3-text-btn::after { content: ""; width: 0.45em; height: 0.45em; border-top: 2.5px solid; border-right: 2.5px solid; rotate: 45deg; }
.m3-text-btn:hover { border-radius: 12px; background: #fff; }
.m3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m3-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 10px; border: 1px solid var(--outline-v); background: var(--surface-low); font-size: 0.92rem; font-weight: 600; color: var(--on-surface-v); }
.m3-chip svg { width: 18px; height: 18px; color: var(--primary); }
.m3-fchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 8px; background: var(--secondary-container); color: var(--on-secondary-container); font-size: 0.88rem; font-weight: 700; margin: 0 8px 8px 0; }
.m3-fchip svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.m3-hero {
  max-width: var(--max); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.m3-hero__text .m3-display { margin: 1.4rem 0 1.4rem; max-width: 11ch; }
.m3-hero__lead { max-width: 50ch; font-size: clamp(1.08rem, 1.35vw, 1.22rem); color: var(--on-surface-v); }
.m3-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 2.2rem; }
.m3-hero__art { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.m3-shape { display: grid; place-items: center; transition: clip-path .7s var(--spring), rotate .7s var(--ease), border-radius .5s var(--ease); }
.m3-shape--cookie { grid-row: 1 / 3; aspect-ratio: 1; align-self: center; background: var(--primary-container); clip-path: var(--sh-c12); }
.m3-shape--cookie:hover { clip-path: var(--sh-circle); }
.m3-shape--clover { aspect-ratio: 1; width: 82%; justify-self: center; background: var(--tertiary-container); color: var(--on-tertiary-container); clip-path: var(--sh-clover); }
.m3-shape--clover svg { width: 38%; }
.m3-shape--clover:hover { clip-path: var(--sh-burst); rotate: 45deg; }
.m3-shape--pill { position: absolute; left: 8%; bottom: -6px; width: 50%; height: 68px; border-radius: 34px; background: var(--secondary); color: var(--secondary-container); padding: 0 24px; box-shadow: 0 10px 20px -8px rgba(60, 30, 80, 0.4); }
.m3-shape--pill svg { width: 100%; height: 28px; }
.m3-shape--sq { aspect-ratio: 1; background: var(--surface-highest); clip-path: var(--sh-sq); }
.m3-shape--sq:hover { clip-path: var(--sh-c4); }
.m3-mini { background: #fff; border-radius: 20px; box-shadow: 0 8px 20px -10px rgba(60, 30, 80, 0.35); }
.m3-mini--contact { width: 58%; padding: 18px; display: grid; gap: 10px; justify-items: start; }
.m3-mini__avatar { width: 46px; height: 46px; background: var(--tertiary-container); clip-path: var(--sh-c6); }
.m3-mini__line { width: 60%; height: 10px; border-radius: 5px; background: var(--surface-highest); }
.m3-mini__line--w { width: 85%; background: var(--primary); opacity: 0.85; }
.m3-mini__pills { display: flex; gap: 6px; }
.m3-mini__pills i { width: 34px; height: 18px; border-radius: 9px; background: var(--secondary-container); }
.m3-mini__pills i:first-child { background: var(--primary-container); }
.m3-mini--site { width: 64%; aspect-ratio: 1; padding: 12px; display: flex; flex-direction: column; gap: 7px; border-radius: 16px; }
.m3-mini--site i { height: 34%; border-radius: 10px; background: var(--primary-container); }
.m3-mini--site b { height: 10px; width: 70%; border-radius: 5px; background: var(--on-surface); opacity: 0.75; }
.m3-mini--site s { height: 7px; border-radius: 4px; background: var(--surface-highest); }

/* ---------- Sections ---------- */
.m3-sec { max-width: var(--max); margin: 0 auto; padding: clamp(88px, 11vw, 150px) var(--gutter) 0; }
.m3-sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.m3-sec__intro { font-size: clamp(1.1rem, 1.4vw, 1.25rem); color: var(--on-surface-v); max-width: 46ch; }

/* Segmented buttons */
.m3-seg { display: inline-flex; margin-bottom: 24px; border: 1px solid var(--outline); border-radius: 999px; overflow: hidden; }
.m3-seg a { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; font-weight: 700; font-size: 0.95rem; text-decoration: none; color: var(--on-surface); transition: background-color .25s var(--ease); }
.m3-seg a + a { border-left: 1px solid var(--outline); }
.m3-seg a svg { width: 0; height: 18px; transition: width .3s var(--ease); }
.m3-seg a:hover { background: var(--surface-high); }
.m3-seg a:first-child { background: var(--secondary-container); color: var(--on-secondary-container); }
.m3-seg a:first-child svg { width: 18px; }
.m3-svc:has(#m3-con:target, #m3-coa:target) .m3-seg a:first-child { background: transparent; color: var(--on-surface); }
.m3-svc:has(#m3-con:target, #m3-coa:target) .m3-seg a:first-child svg { width: 0; }
.m3-svc:has(#m3-con:target) .m3-seg a[href="#m3-con"], .m3-svc:has(#m3-coa:target) .m3-seg a[href="#m3-coa"] { background: var(--secondary-container); color: var(--on-secondary-container); }
.m3-svc:has(#m3-con:target) .m3-seg a[href="#m3-con"] svg, .m3-svc:has(#m3-coa:target) .m3-seg a[href="#m3-coa"] svg { width: 18px; }

/* Service cards */
.m3-svc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.m3-card { position: relative; padding: clamp(24px, 3.4vw, 48px); }
.m3-card p { max-width: 54ch; }
.m3-card--dev { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); border-radius: 48px; background: var(--surface-high); }
.m3-card--dev .m3-title-l { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.m3-card--dev__head > p:not(.m3-filter):not(.m3-note) { color: var(--on-surface-v); }
.m3-filter { margin-top: 1.6rem; }
.m3-note { font-size: 0.98rem; font-weight: 500; }
.m3-list { display: grid; gap: 4px; }
.m3-list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding: 16px 20px 16px 16px; background: var(--surface-low); border-radius: 8px; transition: border-radius .35s var(--ease), background-color .3s; }
.m3-list li:first-child { border-radius: 28px 28px 8px 8px; }
.m3-list li:last-child { border-radius: 8px 8px 28px 28px; }
.m3-list li:hover { border-radius: 28px; background: #fff; }
.m3-list strong { display: block; font-size: 1.1rem; font-weight: 700; }
.m3-list span:not(.m3-ico) { color: var(--on-surface-v); font-size: 0.98rem; }
.m3-ico { display: grid; place-items: center; width: 56px; height: 56px; transition: clip-path .6s var(--spring), rotate .6s var(--ease); }
.m3-ico svg { width: 26px; height: 26px; }
.m3-ico--c9 { background: var(--primary-container); color: var(--on-primary-container); clip-path: var(--sh-c9); }
.m3-ico--clover { background: var(--tertiary-container); color: var(--on-tertiary-container); clip-path: var(--sh-clover); }
.m3-ico--sq { background: var(--secondary-container); color: var(--on-secondary-container); clip-path: var(--sh-sq); }
li:hover > .m3-ico, div:hover > dt > .m3-ico { clip-path: var(--sh-circle); }
.m3-card--con { grid-column: 1 / 8; border-radius: 28px 96px 28px 28px; background: var(--tertiary-container); color: var(--on-tertiary-container); }
.m3-card--coa { grid-column: 8 / -1; border-radius: 200px 200px 36px 36px; background: var(--primary-container); color: var(--on-primary-container); padding-top: clamp(56px, 6vw, 88px); }
.m3-badge-shape { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 1.2rem; transition: clip-path .7s var(--spring), rotate .7s var(--ease); }
.m3-badge-shape svg { width: 30px; height: 30px; }
.m3-badge-shape--burst { background: var(--tertiary); color: #fff; clip-path: var(--sh-burst); }
.m3-badge-shape--c6 { background: var(--primary); color: #fff; clip-path: var(--sh-c6); }
.m3-card:hover .m3-badge-shape--burst { clip-path: var(--sh-c4); rotate: 45deg; }
.m3-card:hover .m3-badge-shape--c6 { clip-path: var(--sh-clover); rotate: -45deg; }
.m3-checks { margin-top: 1.2rem; display: grid; gap: 0.6rem; }
.m3-checks li { position: relative; padding-left: 2.1rem; }
.m3-checks li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 1.4rem; height: 1.4rem; background: rgba(255, 255, 255, 0.7); clip-path: var(--sh-c9); }
.m3-checks li::after { content: ""; position: absolute; left: 0.5rem; top: 0.38em; width: 0.32rem; height: 0.6rem; border: solid currentColor; border-width: 0 2.4px 2.4px 0; rotate: 45deg; }

/* Approach */
.m3-app__surface { padding: clamp(32px, 5vw, 72px); border-radius: 56px; background: var(--surface-c); }
.m3-stepper { position: relative; }
.m3-wave { position: absolute; left: 0; right: 0; top: 30px; width: 100%; height: 24px; color: var(--primary); }
.m3-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.m3-step__n { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 1.4rem; font-weight: 800; font-size: 1.8rem; transition: clip-path .7s var(--spring), rotate .7s var(--ease); }
.m3-step__n--1 { background: var(--primary); color: var(--on-primary); clip-path: var(--sh-circle); }
.m3-step__n--2 { background: var(--tertiary-container); color: var(--on-tertiary-container); clip-path: var(--sh-c4); }
.m3-step__n--3 { background: var(--primary-container); color: var(--on-primary-container); clip-path: var(--sh-c9); }
.m3-step__n--4 { background: var(--secondary-container); color: var(--on-secondary-container); clip-path: var(--sh-burst); }
.m3-step:hover .m3-step__n { clip-path: var(--sh-c12); rotate: 20deg; }
.m3-step:hover .m3-step__n--1 { clip-path: var(--sh-clover); }
.m3-step p { color: var(--on-surface-v); max-width: 30ch; }
.m3-app__more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; margin-top: 16px; }
.m3-card--small { border-radius: 56px 16px 56px 16px; background: var(--secondary-container); color: var(--on-secondary-container); }
.m3-card--small p + p { margin-top: 1rem; }
.m3-card--faq { border-radius: 16px 56px 16px 56px; background: var(--surface-high); }
.m3-card--faq details { border-radius: 20px; background: var(--surface-low); margin-top: 8px; transition: background-color .3s; }
.m3-card--faq details[open] { background: #fff; }
.m3-card--faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px 18px 16px 22px; font-weight: 700; line-height: 1.35; }
.m3-card--faq summary::-webkit-details-marker { display: none; }
.m3-card--faq summary::after { content: ""; flex: none; width: 36px; height: 36px; background: var(--primary-container); clip-path: var(--sh-c6); transition: clip-path .5s var(--spring), rotate .5s var(--ease), background-color .3s; }
.m3-card--faq details[open] summary::after { clip-path: var(--sh-circle); background: var(--primary); rotate: 60deg; }
.m3-card--faq summary:hover { color: var(--primary); }
.m3-card--faq details p { padding: 0 22px 20px; color: var(--on-surface-v); }

/* Products – multi-browse carousel layout */
.m3-carousel { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; align-items: stretch; }
.m3-pcard { display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 32px); border-radius: 40px; transition: border-radius .4s var(--ease); }
.m3-pcard:hover { border-radius: 24px; }
.m3-pcard p:not(.m3-meta) { opacity: 0.9; }
.m3-pcard .m3-text-btn { align-self: flex-start; margin-top: auto; }
.m3-pcard .m3-meta { margin-bottom: 1.2rem; }
.m3-pcard--1 { background: var(--primary-container); color: var(--on-primary-container); }
.m3-pcard--2 { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.m3-pcard--3 { background: var(--secondary-container); color: var(--on-secondary-container); }
.m3-pcard__art { display: grid; place-items: center; height: 200px; margin-bottom: 1.5rem; border-radius: 28px; background: rgba(255, 255, 255, 0.55); overflow: hidden; }
.m3-gauge { display: grid; place-items: center; align-content: center; width: 160px; height: 160px; background: var(--primary); color: #fff; clip-path: var(--sh-c12); transition: clip-path .7s var(--spring), rotate .7s var(--ease); }
.m3-pcard:hover .m3-gauge { clip-path: var(--sh-burst); }
.m3-gauge__val { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.m3-gauge__unit { font-size: 0.95rem; font-weight: 600; opacity: 0.85; }
.m3-phone { width: 116px; height: 230px; margin-top: 70px; border-radius: 28px; background: #fff; border: 6px solid var(--on-tertiary-container); padding: 18px 10px; display: flex; flex-direction: column; gap: 8px; }
.m3-phone__search { height: 18px; border-radius: 9px; background: var(--surface-highest); }
.m3-phone__row { height: 30px; border-radius: 12px; background: var(--surface-low); }
.m3-phone__row.is-on { background: var(--tertiary); }
.m3-dishes { display: flex; gap: 10px; }
.m3-dishes span { width: 64px; height: 64px; background: #fff; clip-path: var(--sh-c9); transition: clip-path .6s var(--spring), translate .6s var(--ease); }
.m3-dishes span.is-on { background: var(--secondary); clip-path: var(--sh-clover); translate: 0 -14px; }
.m3-pcard:hover .m3-dishes span { clip-path: var(--sh-circle); }

/* Contact */
.m3-con { padding-bottom: clamp(88px, 11vw, 150px); }
.m3-con__card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 6vw, 88px); border-radius: 64px; background: var(--surface-highest); }
.m3-con__shape { position: absolute; right: -120px; top: -140px; width: 440px; height: 440px; background: var(--primary-container); clip-path: var(--sh-c12); opacity: 0.8; }
.m3-con__text, .m3-con__list { position: relative; }
.m3-con__title { max-width: 14ch; margin-bottom: 1.2rem; }
.m3-con__text .m3-fab { margin-top: 2rem; }
.m3-con__list { display: grid; gap: 8px; }
.m3-con__list > div { position: relative; padding: 18px 22px 18px 92px; min-height: 92px; border-radius: 24px; background: var(--surface-low); }
.m3-con__list dt .m3-ico { position: absolute; left: 18px; top: 18px; }
.m3-con__list dt { font-size: 0.88rem; font-weight: 600; color: var(--on-surface-v); }
.m3-con__list dd { font-weight: 700; font-size: 1.12rem; hyphens: manual; }
.m3-con__list address { font-weight: 500; font-size: 1rem; }
.m3-con__list a { color: var(--primary); text-decoration: none; }
.m3-con__list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Footer */
.m3-foot { background: var(--surface-c); border-radius: 48px 48px 0 0; padding: clamp(36px, 5vw, 56px) var(--gutter); }
.m3-foot__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.m3-foot__brand { display: flex; align-items: center; gap: 1rem; margin-right: auto; }
.m3-foot__brand p { font-size: 0.92rem; color: var(--on-surface-v); }
.m3-foot__brand .m3-foot__name { font-weight: 700; color: var(--on-surface); font-size: 1rem; }
.m3-foot__links { display: flex; flex-wrap: wrap; gap: 8px; }
.m3-foot__links a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--outline-v); text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: border-radius .3s var(--ease), background-color .3s; }
.m3-foot__links a:hover { border-radius: 10px; background: var(--secondary-container); }
.m3-foot__copy { font-size: 0.9rem; color: var(--on-surface-v); }

/* Legal */
.legal { max-width: calc(46rem + 2 * var(--gutter)); margin: clamp(24px, 4vw, 48px) auto clamp(64px, 8vw, 110px); padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px); border-radius: 48px; background: var(--surface-low); }
.legal h1 { font-weight: 600; letter-spacing: -0.04em; }
.legal h1::before { content: ""; display: block; width: 64px; height: 64px; margin-bottom: 1.4rem; background: var(--primary-container); clip-path: var(--sh-c9); }
.legal h2 { font-weight: 650; }
.legal a { color: var(--primary); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Responsive */
@media (max-width: 1100px) {
  .m3-brand__sub { font-size: 0.74rem; }
  .m3-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .m3-wave { display: none; }
  .m3-carousel { grid-template-columns: 1fr 1fr; }
  .m3-pcard--1 { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .m3-bar { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .m3-nav { order: 3; width: 100%; justify-content: space-between; }
  .m3-nav a { padding: 0.5rem 0.65rem; font-size: 0.88rem; }
  .m3-hero, .m3-sec__head, .m3-card--dev, .m3-app__more, .m3-con__card { grid-template-columns: 1fr; }
  .m3-hero__art { max-width: 460px; margin-inline: auto; width: 100%; }
  .m3-card--con, .m3-card--coa { grid-column: 1 / -1; }
  .m3-card--coa { border-radius: 140px 140px 32px 32px; }
  .m3-seg { display: flex; width: 100%; }
  .m3-seg a { flex: 1; justify-content: center; padding: 0 8px; font-size: 0.82rem; text-align: center; line-height: 1.15; }
  .m3-seg a svg { display: none; }
  .m3-app__surface { border-radius: 36px; }
  .m3-con__card { border-radius: 40px; }
  .m3-con__shape { width: 300px; height: 300px; right: -110px; top: -120px; }
}
@media (max-width: 560px) {
  .m3-steps, .m3-carousel { grid-template-columns: 1fr; }
  .m3-fab { height: 58px; font-size: 1.02rem; }
  .m3-card { padding: 24px 20px; }
  .m3-card--dev { border-radius: 36px; }
  .m3-list li { grid-template-columns: 48px 1fr; padding: 14px 14px 14px 12px; gap: 12px; }
  .m3-list .m3-ico { width: 48px; height: 48px; }
  .m3-con__list > div { padding: 16px 16px 16px 80px; }
  .m3-con__list dd { font-size: 1rem; }
  .m3-con__list dt .m3-ico { left: 14px; }
}