:root{
  --ink:#0f2730;--text:#3d5560;--muted:#7a9099;
  --teal:#148090;--teal-2:#1fa2b3;--teal-hi:#5cc9d6;--teal-deep:#0d6372;
  --bg:#eef4f6;--card:#ffffff;
  --head:'Oswald','Arial Narrow',Arial,sans-serif;
  --body:'Manrope','Segoe UI',Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(120% 55% at 50% -8%,rgba(92,201,214,.32),rgba(92,201,214,0) 62%),
    radial-gradient(90% 40% at 50% 108%,rgba(20,128,144,.12),rgba(20,128,144,0) 70%),
    var(--bg);
  color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* ледь помітний патерн шестикутників */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17z' fill='none' stroke='%23148090' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E");
  -webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.2) 45%,transparent 75%);mask:linear-gradient(180deg,#000,rgba(0,0,0,.2) 45%,transparent 75%)}
a{color:inherit;text-decoration:none}

.page{position:relative;min-height:100vh;min-height:100svh;max-width:460px;margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.6svh,26px);
  padding:max(14px,env(safe-area-inset-top)) 18px max(12px,env(safe-area-inset-bottom))}

/* логотип */
.brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.brand__mark{width:clamp(58px,10.5svh,92px);height:auto;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:square;
  filter:drop-shadow(0 10px 18px rgba(20,128,144,.22))}
.brand__hex{stroke:var(--teal);stroke-width:2.6;stroke-linejoin:round;fill:rgba(255,255,255,.75)}
.brand__name{margin-top:clamp(6px,1.2svh,12px);font-weight:500;font-size:clamp(17px,2.7svh,22px);letter-spacing:.32em;padding-left:.32em;color:var(--ink)}
.brand__tag{margin-top:6px;font-size:clamp(10.5px,1.55svh,12.5px);font-weight:700;letter-spacing:.06em;color:var(--teal)}
.brand__tag::after{content:"";display:block;width:56px;height:2px;margin:clamp(8px,1.4svh,12px) auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--teal-2),transparent)}

/* пропозиція */
.offer{text-align:center}
h1{margin:0;font-family:var(--head);font-weight:600;text-transform:uppercase;line-height:1.04;letter-spacing:.01em;
  font-size:clamp(26px,min(8.6vw,4.6svh),38px);color:var(--ink)}
h1 span{display:block;white-space:nowrap;background:linear-gradient(180deg,var(--teal-2),var(--teal-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:clamp(6px,1.2svh,12px) auto 0;max-width:36ch;font-size:clamp(13px,1.95svh,15px);font-weight:500;line-height:1.5;color:var(--text)}
.perks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:clamp(8px,1.6svh,14px) 0 0;padding:0;list-style:none}
.perks li{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(20,128,144,.18);
  font-size:clamp(11px,1.6svh,12.5px);font-weight:700;color:var(--teal-deep);white-space:nowrap}

/* кнопки-пігулки */
.links{display:flex;flex-direction:column;gap:clamp(8px,1.4svh,12px)}
.links__title{display:flex;align-items:center;gap:10px;margin:clamp(4px,1svh,10px) 0 0;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.links__title::before,.links__title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(20,128,144,.3))}
.links__title::after{transform:scaleX(-1)}

.pill{position:relative;display:flex;align-items:center;gap:14px;min-height:clamp(58px,8.6svh,70px);padding:10px 16px 10px 12px;
  border-radius:999px;background:var(--card);border:1px solid rgba(15,39,48,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px -14px rgba(15,39,48,.35);
  -webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.pill:hover,.pill:focus-visible{transform:translateY(-2px);border-color:rgba(20,128,144,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 32px -14px rgba(20,128,144,.45)}
.pill:active{transform:scale(.985)}
.pill:focus-visible{outline:2px solid var(--teal-2);outline-offset:3px}

.pill__ico{width:clamp(38px,5.6svh,44px);height:clamp(38px,5.6svh,44px);flex:none;border-radius:50%;display:grid;place-items:center;
  background:#e7f4f6;color:var(--teal)}
.pill__ico svg{width:20px;height:20px;fill:currentColor}
.pill__ico--ig svg{fill:none}
.pill__ico--ig{background:linear-gradient(135deg,#fdf1e6,#fbe3ef 55%,#ece6fb);color:#c1357a}
.pill__ico--fb{background:#e8effd;color:#1b5fd6}
.pill__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pill__title{font-weight:700;font-size:clamp(15px,2.2svh,17px);line-height:1.15}
.pill__sub{font-size:clamp(11px,1.6svh,12.5px);font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill__arrow{width:18px;height:18px;flex:none;background:currentColor;color:var(--muted);transition:transform .3s var(--ease);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M14 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M14 6l6 6-6 6'/></svg>") center/contain no-repeat}
.pill:hover .pill__arrow{transform:translateX(3px)}

/* головна кнопка — дзвінок */
.pill--main{overflow:hidden;border:0;min-height:clamp(64px,9.6svh,78px);
  background:linear-gradient(135deg,#25b3c4 0%,var(--teal) 55%,var(--teal-deep) 100%);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 34px -14px rgba(13,99,114,.75)}
.pill--main::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));
  transform:skewX(-20deg);animation:shine 5s 1.2s infinite}
.pill--main .pill__ico{background:rgba(255,255,255,.18);color:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.45);animation:ring 2.4s 1s infinite}
.pill--main .pill__title{font-size:clamp(17px,2.6svh,20px)}
.pill--main .pill__sub{color:rgba(255,255,255,.9);font-size:clamp(13px,1.9svh,15px);font-weight:700;letter-spacing:.04em}
.pill--main .pill__arrow{color:#fff}
.pill--main:hover{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 22px 40px -14px rgba(13,99,114,.85)}

.foot{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.foot__dev{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px dashed rgba(20,128,144,.35);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep)}
.foot__dev::before{content:"";width:7px;height:7px;border-radius:50%;background:#f0a020;box-shadow:0 0 0 0 rgba(240,160,32,.5);animation:pulse 1.8s infinite}
.foot__copy{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* поява */
.brand,.offer,.links,.foot{animation:rise .7s var(--ease) both}
.offer{animation-delay:.08s}.links{animation-delay:.16s}.foot{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes shine{0%{left:-60%}25%,100%{left:140%}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,160,32,.5)}70%,100%{box-shadow:0 0 0 7px rgba(240,160,32,0)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}

/* низькі екрани */
@media (max-height:640px){
  .perks{display:none}
  .foot__copy{display:none}
}
@media (max-height:600px){
  .page{gap:10px}
  .brand__tag::after{margin-top:6px}
}
@media (max-height:560px){
  .lead{display:none}
}
/* планшет / десктоп: картка по центру */
@media (min-width:768px){
  .page{max-width:480px;gap:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}