:root{
  --ink:#10243a;
  --muted:#64748b;
  --coral:#ff6d7d;
  --apricot:#ffab72;
  --aqua:#28d6d0;
  --jade:#58d5a4;
  --sky:#5bbef3;
  --violet:#9b7af2;
  --yellow:#f4c84b;
  --glass:rgba(255,255,255,.32);
  --glass-strong:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.8);
  --shadow:
    0 26px 74px rgba(53,77,107,.16),
    0 10px 26px rgba(85,116,150,.09)
}

*{
  box-sizing:border-box
}

html{
  background:#edf7fb;
  scroll-behavior:smooth
}

body{
  margin:0;
  min-height:100vh;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 5% 2%,rgba(75,214,232,.42),transparent 28%),
    radial-gradient(circle at 95% 8%,rgba(255,128,143,.35),transparent 31%),
    radial-gradient(circle at 86% 58%,rgba(155,122,242,.25),transparent 28%),
    radial-gradient(circle at 8% 82%,rgba(88,213,164,.22),transparent 31%),
    linear-gradient(145deg,#fafdff 0%,#edf8fb 48%,#fff4f6 100%);
  background-attachment:fixed;
  overflow-x:hidden
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.42),
      transparent 24%,
      transparent 72%,
      rgba(255,255,255,.22)
    );
  mix-blend-mode:screen
}

button,
input,
select,
textarea{
  font:inherit
}

.orb{
  position:fixed;
  border-radius:50%;
  filter:blur(46px);
  opacity:.5;
  pointer-events:none;
  animation:float 10s ease-in-out infinite alternate
}

.o1{
  width:260px;
  height:260px;
  background:linear-gradient(145deg,#49e3e6,#67bff1);
  right:-90px;
  top:105px
}

.o2{
  width:270px;
  height:270px;
  background:linear-gradient(145deg,#ff9a89,#ff7fab);
  left:-120px;
  top:520px;
  animation-delay:-3s
}

.o3{
  width:250px;
  height:250px;
  background:linear-gradient(145deg,#b091ff,#77d7df);
  right:-20px;
  bottom:25px;
  animation-delay:-6s
}

@keyframes float{
  to{
    transform:translate3d(12px,-18px,0) scale(1.06)
  }
}

.shell{
  width:min(100%,480px);
  margin:auto;
  min-height:100vh;
  padding:86px 14px 124px;
  position:relative;
  z-index:1
}

.glass{
  position:relative;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.52),
      rgba(255,255,255,.13)
    );
  border:1px solid var(--line);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 0 0 26px rgba(255,255,255,.12),
    var(--shadow);
  backdrop-filter:blur(38px) saturate(190%);
  -webkit-backdrop-filter:blur(38px) saturate(190%)
}

.glass:after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.62),
      transparent 22%,
      transparent 70%,
      rgba(255,255,255,.2)
    );
  opacity:.72
}

.top{
  position:fixed;
  z-index:20;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100% - 24px),456px);
  height:64px;
  border-radius:31px;
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  padding:7px 8px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.57),
      rgba(255,255,255,.18)
    );
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 22px 52px rgba(62,84,111,.12)
}

.round{
  position:relative;
  z-index:2;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.82);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.56),
      rgba(255,255,255,.18)
    );
  border-radius:50%;
  font-size:23px;
  cursor:pointer;
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.95),
    0 8px 20px rgba(65,91,121,.13);
  transition:.25s ease
}

.round:active{
  transform:scale(.94)
}

.top .round:first-child{
  opacity:0;
  pointer-events:none
}

.mini{
  position:relative;
  z-index:2;
  text-align:center
}

.mini b{
  display:block;
  font-family:"Segoe Script",cursive;
  color:#ec527d;
  font-size:22px;
  text-shadow:0 1px 10px rgba(255,255,255,.8)
}

.mini small{
  font-size:9px;
  letter-spacing:.28em;
  font-weight:700
}

.hero{
  position:relative;
  overflow:hidden;
  border-radius:42px;
  min-height:700px;
  padding:34px 28px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.50),
      rgba(255,255,255,.11)
    );
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.16),
    0 28px 65px rgba(53,77,107,.12)
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.78) 0 36%,
      rgba(255,255,255,.28) 69%,
      rgba(255,255,255,.11)
    );
  z-index:0
}

.hero:after{
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.72),
      transparent 23%,
      transparent 63%,
      rgba(255,255,255,.24)
    );
  animation:sheen 8s ease-in-out infinite
}

@keyframes sheen{
  0%,60%{
    transform:translateX(-18%);
    opacity:.3
  }

  75%{
    transform:translateX(12%);
    opacity:.75
  }

  100%{
    transform:translateX(18%);
    opacity:.3
  }
}

.portrait{
  position:absolute;
  right:-34px;
  top:70px;
  width:95%;
  height:88%;
  object-fit:contain;
  object-position:top right;
  opacity:.29;
  filter:
    saturate(.75)
    contrast(.94)
    brightness(1.09);
  mix-blend-mode:multiply;
  -webkit-mask-image:
    linear-gradient(
      to left,
      black 38%,
      rgba(0,0,0,.70) 68%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to left,
      black 38%,
      rgba(0,0,0,.70) 68%,
      transparent 100%
    )
}

.hero-content{
  position:relative;
  z-index:2;
  width:72%
}

.brand{
  margin-bottom:82px
}

.brand strong{
  display:block;
  font-family:"Segoe Script",cursive;
  font-size:52px;
  font-weight:500;
  background:
    linear-gradient(
      90deg,
      #e84f78,
      #ff8e57,
      #8b62e8
    );
  -webkit-background-clip:text;
  color:transparent;
  filter:drop-shadow(0 5px 14px rgba(255,255,255,.7))
}

.brand small{
  font-size:17px;
  letter-spacing:.30em;
  font-weight:650
}

.hero h1{
  font-size:46px;
  line-height:1.03;
  letter-spacing:-.04em;
  margin:0 0 28px
}

.hero h1 span{
  background:
    linear-gradient(
      90deg,
      var(--coral),
      var(--apricot)
    );
  -webkit-background-clip:text;
  color:transparent
}

.hero p{
  font-size:19px;
  line-height:1.58;
  color:#31475d
}

.actions{
  display:grid;
  gap:10px;
  margin-top:17px
}

.btn{
  position:relative;
  z-index:2;
  display:block;
  text-align:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.88);
  border-radius:25px;
  padding:16px 18px;
  font-size:17px;
  font-weight:760;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:
    inset 0 2px 13px rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 13px 30px rgba(53,75,105,.13);
  transition:
    transform .2s ease,
    box-shadow .2s ease
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.7),
    0 16px 32px rgba(53,75,105,.18)
}

.btn:active{
  transform:scale(.98)
}

.coral{
  background:
    linear-gradient(
      105deg,
      rgba(255,93,115,.95),
      rgba(255,157,96,.92)
    );
  color:white
}

.aqua{
  background:
    linear-gradient(
      105deg,
      rgba(13,185,196,.95),
      rgba(94,216,150,.9)
    );
  color:white
}

.blue{
  background:
    linear-gradient(
      105deg,
      rgba(79,207,238,.95),
      rgba(51,141,231,.92)
    );
  color:white
}

.soft{
  background:rgba(255,255,255,.46)
}

.quick{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:13px
}

.q{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  min-height:176px;
  padding:17px 9px 15px;
  text-align:center;
  display:grid;
  place-content:center;
  gap:7px;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.82);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.54),
      rgba(255,255,255,.10)
    );
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 0 24px rgba(255,255,255,.16),
    0 15px 34px rgba(53,77,107,.11);
  backdrop-filter:blur(34px) saturate(195%);
  -webkit-backdrop-filter:blur(34px) saturate(195%);
  transition:.25s ease
}

.q:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.52),
      rgba(255,255,255,.09)
    )
}

.q:after{
  content:"";
  position:absolute;
  width:75px;
  height:75px;
  border-radius:50%;
  right:-22px;
  top:-24px;
  filter:blur(2px);
  opacity:.75
}

.q>*{
  position:relative;
  z-index:2
}

.q:hover{
  transform:translateY(-3px)
}

.fingerprint{
  display:block;
  width:43px;
  height:50px;
  margin:0 auto 5px;
  background:currentColor;
  opacity:.92;
  filter:drop-shadow(0 5px 9px rgba(30,68,92,.10));
  transform:scaleX(.88);
  -webkit-mask:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%205C18.2%205%207%2016.2%207%2030c0%208.2%202.2%2015.8%206.2%2022.4%22%2F%3E%3Cpath%20d%3D%22M32%2010c-11%200-20%209-20%2020%200%209.4%202.6%2017.5%207.2%2024%22%2F%3E%3Cpath%20d%3D%22M32%2015c-8.3%200-15%206.7-15%2015%200%2010.8%202.7%2019.9%207.3%2027%22%2F%3E%3Cpath%20d%3D%22M32%2020c-5.5%200-10%204.5-10%2010%200%2012%202.4%2021.5%206.4%2028.5%22%2F%3E%3Cpath%20d%3D%22M32%2025c-2.8%200-5%202.2-5%205%200%2012.8%201.7%2022.4%204.8%2029%22%2F%3E%3Cpath%20d%3D%22M32%205c13.8%200%2025%2011.2%2025%2025%200%208.2-2.2%2015.8-6.2%2022.4%22%2F%3E%3Cpath%20d%3D%22M32%2010c11%200%2020%209%2020%2020%200%209.4-2.6%2017.5-7.2%2024%22%2F%3E%3Cpath%20d%3D%22M32%2015c8.3%200%2015%206.7%2015%2015%200%2010.8-2.7%2019.9-7.3%2027%22%2F%3E%3Cpath%20d%3D%22M32%2020c5.5%200%2010%204.5%2010%2010%200%2012-2.4%2021.5-6.4%2028.5%22%2F%3E%3Cpath%20d%3D%22M32%2025c2.8%200%205%202.2%205%205%200%2012.8-1.7%2022.4-4.8%2029%22%2F%3E%3Cpath%20d%3D%22M32%2031c0%2010.5.6%2019%202.1%2026%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mask:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%205C18.2%205%207%2016.2%207%2030c0%208.2%202.2%2015.8%206.2%2022.4%22%2F%3E%3Cpath%20d%3D%22M32%2010c-11%200-20%209-20%2020%200%209.4%202.6%2017.5%207.2%2024%22%2F%3E%3Cpath%20d%3D%22M32%2015c-8.3%200-15%206.7-15%2015%200%2010.8%202.7%2019.9%207.3%2027%22%2F%3E%3Cpath%20d%3D%22M32%2020c-5.5%200-10%204.5-10%2010%200%2012%202.4%2021.5%206.4%2028.5%22%2F%3E%3Cpath%20d%3D%22M32%2025c-2.8%200-5%202.2-5%205%200%2012.8%201.7%2022.4%204.8%2029%22%2F%3E%3Cpath%20d%3D%22M32%205c13.8%200%2025%2011.2%2025%2025%200%208.2-2.2%2015.8-6.2%2022.4%22%2F%3E%3Cpath%20d%3D%22M32%2010c11%200%2020%209%2020%2020%200%209.4-2.6%2017.5-7.2%2024%22%2F%3E%3Cpath%20d%3D%22M32%2015c8.3%200%2015%206.7%2015%2015%200%2010.8-2.7%2019.9-7.3%2027%22%2F%3E%3Cpath%20d%3D%22M32%2020c5.5%200%2010%204.5%2010%2010%200%2012-2.4%2021.5-6.4%2028.5%22%2F%3E%3Cpath%20d%3D%22M32%2025c2.8%200%205%202.2%205%205%200%2012.8-1.7%2022.4-4.8%2029%22%2F%3E%3Cpath%20d%3D%22M32%2031c0%2010.5.6%2019%202.1%2026%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

.q-exp .fingerprint{
  color:#ff6578
}

.q-quality .fingerprint{
  color:#14b8c5
}

.q-care .fingerprint{
  color:#58b86a
}

.q strong{
  font-size:17px;
  line-height:1.08
}

.q small{
  font-size:13px;
  line-height:1.35;
  color:#31475d
}

.q-exp{
  background:
    linear-gradient(
      145deg,
      rgba(255,122,130,.36),
      rgba(255,171,114,.22)
    )
}

.q-exp:after{
  background:#ff9e85;
  opacity:.42
}

.q-quality{
  background:
    linear-gradient(
      145deg,
      rgba(40,214,208,.34),
      rgba(91,190,243,.22)
    )
}

.q-quality:after{
  background:#42d9d2;
  opacity:.42
}

.q-care{
  background:
    linear-gradient(
      145deg,
      rgba(155,122,242,.3),
      rgba(255,109,125,.18)
    )
}

.q-care:after{
  background:#ad8cff;
  opacity:.4
}

.title{
  font-size:38px;
  letter-spacing:-.045em;
  margin:5px 0
}

.sub{
  color:var(--muted);
  line-height:1.5;
  margin:0 0 18px
}

.stack{
  display:grid;
  gap:12px
}

.card{
  border-radius:30px;
  padding:19px;
  position:relative;
  overflow:hidden
}

.service{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:14px;
  align-items:center
}

.icon{
  position:relative;
  z-index:2;
  width:62px;
  height:62px;
  border-radius:23px;
  display:grid;
  place-items:center;
  color:white;
  font-size:27px;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.45),
    0 10px 22px rgba(49,73,101,.15)
}

.ic1{
  background:
    linear-gradient(
      145deg,
      #ff8a82,
      #ff567b
    )
}

.ic2{
  background:
    linear-gradient(
      145deg,
      #68e4d4,
      #10b8b0
    )
}

.ic3{
  background:
    linear-gradient(
      145deg,
      #bd91ff,
      #6d55e8
    )
}

/* Shellac */
.ic4{
  background:
    linear-gradient(
      145deg,
      #ffe98a,
      #f2bd39
    );
  color:#fff;
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.65),
    0 10px 22px rgba(191,145,32,.18)
}

h3{
  margin:0 0 5px
}

.service p,
.muted{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45
}

.price{
  display:flex;
  justify-content:space-between;
  align-items:center
}

.price b{
  font-size:21px
}

.pay-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px
}

.pay{
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.85);
  border-radius:21px;
  padding:13px;
  text-align:center;
  box-shadow:inset 0 1px 0 white
}

.pay span{
  display:block;
  font-size:26px;
  margin-bottom:5px
}

.map-frame{
  position:relative;
  z-index:2;
  width:100%;
  height:245px;
  border:0;
  border-radius:24px;
  display:block;
  box-shadow:0 12px 30px rgba(50,74,100,.12)
}

.location-card{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.43);
  border:1px solid rgba(255,255,255,.84)
}

.location-card small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  line-height:1.4
}

.route-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px
}

.pin{
  font-size:45px
}

.form label{
  position:relative;
  z-index:2;
  display:grid;
  gap:6px;
  margin:12px 0
}

.form input,
.form select,
.form textarea{
  border:1px solid rgba(190,210,230,.82);
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(20px);
  border-radius:17px;
  padding:13px;
  color:var(--ink)
}

.slots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}

.slot{
  border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.44);
  border-radius:16px;
  padding:10px;
  cursor:pointer
}

.slot.active{
  background:
    linear-gradient(
      100deg,
      #14c3c0,
      #47d69a
    );
  color:white
}

.note{
  position:relative;
  z-index:2;
  font-size:12px;
  color:var(--muted);
  line-height:1.45
}

.menu{
  display:grid;
  gap:10px
}

.row{
  width:100%;
  border:1px solid rgba(255,255,255,.82);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.55),
      rgba(255,255,255,.2)
    );
  backdrop-filter:blur(28px);
  border-radius:23px;
  padding:17px 18px;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 white,
    0 12px 28px rgba(53,77,107,.11)
}

.legal details{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,.68);
  padding:13px 0
}

.legal summary{
  font-weight:750;
  cursor:pointer
}

.legal p,
.legal li{
  font-size:14px;
  line-height:1.58;
  color:#40536b
}

.about{
  min-height:540px
}

.about .portrait{
  opacity:.24;
  top:20px;
  height:100%;
  width:110%;
  right:-80px
}

.about-content{
  position:relative;
  z-index:2;
  width:72%
}

.admin-table{
  position:relative;
  z-index:2;
  width:100%;
  border-collapse:collapse;
  font-size:12px
}

.admin-table th,
.admin-table td{
  text-align:left;
  padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.6)
}

.badge{
  display:inline-block;
  border-radius:99px;
  padding:5px 8px;
  background:rgba(18,199,191,.15)
}


/* UNTERE NAVIGATION */

.tabs{
  position:fixed;
  z-index:30;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  width:min(calc(100% - 22px),458px);
  height:92px;
  border-radius:32px;
  padding:8px 7px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.62),
      rgba(255,255,255,.20)
    );
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 18px 44px rgba(53,77,107,.13)
}

.tabs button{
  position:relative;
  z-index:2;
  border:0;
  border-radius:25px;
  padding:8px 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:#536779;
  transition:.2s ease;
  cursor:pointer
}

.tabs button span{
  font-size:25px
}

.tabs button small{
  font-size:12px
}


/* Start */
.tabs button:nth-child(1){
  background:
    linear-gradient(
      145deg,
      rgba(91,190,243,.13),
      rgba(255,255,255,.18)
    )
}

/* Leistungen */
.tabs button:nth-child(2){
  background:
    linear-gradient(
      145deg,
      rgba(255,109,125,.14),
      rgba(255,255,255,.18)
    )
}

/* Preise */
.tabs button:nth-child(3){
  background:
    linear-gradient(
      145deg,
      rgba(155,122,242,.14),
      rgba(255,255,255,.18)
    )
}

/* Standort */
.tabs button:nth-child(4){
  background:
    linear-gradient(
      145deg,
      rgba(40,214,208,.14),
      rgba(255,255,255,.18)
    )
}

/* Mehr */
.tabs button:nth-child(5){
  background:
    linear-gradient(
      145deg,
      rgba(116,142,173,.12),
      rgba(255,255,255,.18)
    )
}


/* Aktive Tabs */

.tabs button:nth-child(1).active{
  color:#328dd0;
  background:
    linear-gradient(
      145deg,
      rgba(143,215,250,.46),
      rgba(255,255,255,.48)
    )
}

.tabs button:nth-child(2).active{
  color:#ed5b72;
  background:
    linear-gradient(
      145deg,
      rgba(255,159,169,.46),
      rgba(255,255,255,.48)
    )
}

.tabs button:nth-child(3).active{
  color:#7658d6;
  background:
    linear-gradient(
      145deg,
      rgba(187,165,247,.45),
      rgba(255,255,255,.48)
    )
}

.tabs button:nth-child(4).active{
  color:#16a9a5;
  background:
    linear-gradient(
      145deg,
      rgba(128,225,221,.45),
      rgba(255,255,255,.48)
    )
}

.tabs button:nth-child(5).active{
  color:#536779;
  background:
    linear-gradient(
      145deg,
      rgba(198,214,229,.45),
      rgba(255,255,255,.48)
    )
}

.tabs button.active{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    0 10px 25px rgba(53,77,107,.11);
  transform:translateY(-1px)
}


@media(max-width:390px){

  .hero{
    min-height:650px;
    padding:30px 22px
  }

  .hero h1{
    font-size:41px
  }

  .hero p{
    font-size:17px
  }

  .brand strong{
    font-size:47px
  }

  .brand small{
    font-size:15px
  }

  .q{
    min-height:163px
  }

  .q strong{
    font-size:15px
  }

  .q small{
    font-size:12px
  }

  .fingerprint{
    width:39px;
    height:46px
  }
}


@media(prefers-reduced-motion:reduce){

  *{
    animation:none!important;
    scroll-behavior:auto!important
  }

}