:root{--primary:#2463eb;--background:#ffffff;--text:#050505;--primary-dark:color-mix(in srgb,var(--primary) 72%,#000);--primary-soft:color-mix(in srgb,var(--primary) 12%,var(--background));font-family:system-ui,system-ui,sans-serif;color:var(--text);background:var(--background)}*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:auto}.hero{min-height:55vh;display:flex;flex-direction:column;justify-content:center;padding:4rem 1.5rem;background:linear-gradient(135deg,var(--primary),#111827);color:#fff;border-radius:0 0 2rem 2rem}.hero h1{font-size:clamp(2.4rem,7vw,5rem);line-height:1;margin:0}.hero p{font-size:1.2rem;max-width:45rem}.section{padding:3rem 1.5rem}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.cards article,form{padding:1.25rem;border:1px solid #dbe2ea;border-radius:1rem}label{display:grid;gap:.4rem;margin:.8rem 0}input,textarea{padding:.75rem;border:1px solid #b9c2cf;border-radius:.6rem;font:inherit}.consent{display:flex}.button{display:inline-block;border:0;border-radius:.7rem;background:var(--primary);color:#fff;padding:.8rem 1rem;text-decoration:none;cursor:pointer}#kanntraia-pwa-install{
position:fixed;
left:1rem;
right:1rem;
bottom:1rem;
z-index:2147483645;
max-width:720px;
margin:auto;
padding:1rem;
border:1px solid #dbe2ea;
border-radius:1rem;
background:#fff;
color:#111827;
box-shadow:0 20px 60px #0004;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem
}
#kanntraia-pwa-install[hidden]{
display:none
}

.pwa-shell-header{
position:fixed;
inset:0 0 auto 0;
z-index:2147483646;
min-height:64px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:
max(10px,env(safe-area-inset-top))
16px
10px;
border-bottom:1px solid #dbe2ea;
background:rgba(255,255,255,.96);
color:#111827;
box-shadow:0 8px 30px rgba(15,23,42,.08);
backdrop-filter:blur(14px)
}

.pwa-shell-brand{
min-width:0;
display:flex;
flex-direction:column;
gap:3px
}

.pwa-shell-brand strong{
max-width:190px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:15px
}

.pwa-shell-brand span{
display:flex;
align-items:center;
gap:6px;
font-size:11px;
color:#64748b
}

.pwa-shell-brand i{
width:8px;
height:8px;
display:block;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 10px rgba(34,197,94,.65)
}

.pwa-shell-header-action{
flex:0 0 auto;
max-width:52vw
}


#kanntraia-push-panel{
position:fixed;
left:1rem;
right:1rem;
bottom:
calc(
  86px +
  env(safe-area-inset-bottom)
);
z-index:2147483647;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
max-width:720px;
max-height:
calc(
  100vh -
  130px -
  env(safe-area-inset-top)
);
margin:auto;
padding:1rem;
overflow-y:auto;
border:1px solid #dbe2ea;
border-radius:1rem;
background:#fff;
color:#111827;
box-shadow:0 20px 60px rgba(0,0,0,.22);
}

#kanntraia-push-panel[hidden]{
display:none;
}

.pwa-push-copy strong{
display:block;
font-size:1rem;
}

.pwa-push-copy p{
margin:.35rem 0;
font-size:.9rem;
line-height:1.45;
}

.pwa-push-copy small{
display:block;
}

.pwa-push-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:.75rem;
flex-shrink:0;
}

.pwa-push-actions button{
min-height:44px;
white-space:nowrap;
}

@media(max-width:640px){
  #kanntraia-push-panel{
    left:.75rem;
    right:.75rem;
    bottom:
    calc(
      82px +
      env(safe-area-inset-bottom)
    );
    align-items:stretch;
    flex-direction:column;
  }

  .pwa-push-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .pwa-push-actions button{
    width:100%;
  }
}


#kanntraia-push-panel{
position:fixed;
left:1rem;
right:1rem;
bottom:
calc(
  86px +
  env(safe-area-inset-bottom)
);
z-index:2147483647;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
max-width:720px;
max-height:
calc(
  100vh -
  130px -
  env(safe-area-inset-top)
);
margin:auto;
padding:1rem;
overflow-y:auto;
border:1px solid #dbe2ea;
border-radius:1rem;
background:#fff;
color:#111827;
box-shadow:0 20px 60px rgba(0,0,0,.22);
}

#kanntraia-push-panel[hidden]{
display:none;
}

.pwa-push-copy strong{
display:block;
font-size:1rem;
}

.pwa-push-copy p{
margin:.35rem 0;
font-size:.9rem;
line-height:1.45;
}

.pwa-push-copy small{
display:block;
}

.pwa-push-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:.75rem;
flex-shrink:0;
}

.pwa-push-actions button{
min-height:44px;
white-space:nowrap;
}

@media(max-width:640px){
  #kanntraia-push-panel{
    left:.75rem;
    right:.75rem;
    bottom:
    calc(
      82px +
      env(safe-area-inset-bottom)
    );
    align-items:stretch;
    flex-direction:column;
  }

  .pwa-push-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .pwa-push-actions button{
    width:100%;
  }
}

.pwa-shell-actions{
position:fixed;
inset:auto 0 0 0;
z-index:2147483646;
display:flex;
align-items:center;
gap:8px;
padding:
10px
12px
max(10px,env(safe-area-inset-bottom));
overflow-x:auto;
border-top:1px solid #dbe2ea;
background:rgba(255,255,255,.97);
box-shadow:0 -8px 30px rgba(15,23,42,.1);
backdrop-filter:blur(14px);
scrollbar-width:none
}

.pwa-shell-actions::-webkit-scrollbar{
display:none
}

.pwa-shell-action{
min-height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
border:1px solid color-mix(
  in srgb,
  var(--primary) 35%,
  #cbd5e1
);
border-radius:13px;
padding:9px 14px;
background:
color-mix(
  in srgb,
  var(--background) 88%,
  #fff
);
color:var(--text);
font:inherit;
font-size:13px;
font-weight:800;
cursor:pointer;
box-shadow:0 4px 15px rgba(15,23,42,.08)
}

.pwa-shell-action:hover{
background:color-mix(
  in srgb,
  var(--primary) 7%,
  #fff
)
}

.pwa-shell-header-action{
border-color:var(--primary);
background:var(--primary);
color:#fff
}

.pwa-shell-action:disabled{
opacity:.65;
cursor:wait
}

.pwa-share-panel{
position:fixed;
left:1rem;
bottom:1rem;
z-index:2147483643;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:.35rem;
pointer-events:none
}

.pwa-share-button{
pointer-events:auto;
min-width:132px;
box-shadow:0 14px 38px rgba(0,0,0,.24);
font-weight:750
}

.pwa-share-status{
display:block;
max-width:260px;
padding:.35rem .55rem;
border-radius:.5rem;
background:rgba(17,24,39,.88);
color:#fff;
font-size:.76rem;
line-height:1.25;
opacity:0;
transform:translateY(4px);
transition:opacity .2s ease,transform .2s ease
}

.pwa-share-status.is-visible{
opacity:1;
transform:translateY(0)
}

body:has(#kanntraia-pwa-install:not([hidden]))
.pwa-share-panel,
body:has(#kanntraia-push-panel:not([hidden]))
.pwa-share-panel{
bottom:8.5rem
}
.pwa-install-copy strong{
display:block;
font-size:1rem
}
.pwa-install-copy p{
margin:.3rem 0;
font-size:.9rem
}
.pwa-install-copy small{
display:block;
color:#64748b
}
.pwa-install-actions{
display:flex;
gap:.5rem;
flex-shrink:0
}
.pwa-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid #cbd5e1;
border-radius:.7rem;
background:#fff;
color:#334155;
padding:.8rem 1rem;
cursor:pointer;
font:inherit
}
@media(max-width:600px){
#kanntraia-pwa-install{
align-items:stretch;
flex-direction:column
}
.pwa-install-actions{
display:grid;
grid-template-columns:1fr 1fr
}
}
#kanntraia-consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:2147483646;max-width:680px;margin:auto;padding:1rem;border:1px solid #dbe2ea;border-radius:1rem;background:#fff;box-shadow:0 20px 50px #0003}

.conversion-hero{
min-height:100vh;
padding:24px;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(
  circle at 20% 10%,
  color-mix(
    in srgb,
    var(--primary) 42%,
    transparent
  ),
  transparent 38%
),
linear-gradient(
  145deg,
  color-mix(
    in srgb,
    var(--background) 76%,
    #000
  ) 0%,
  color-mix(
    in srgb,
    var(--primary) 72%,
    var(--background)
  ) 52%,
  color-mix(
    in srgb,
    var(--primary) 72%,
    #000
  ) 100%
);
color:#fff
}

.conversion-shell{
width:min(100%,540px);
text-align:center
}

.conversion-content{
padding:32px 28px;
border:1px solid rgba(255,255,255,.22);
border-radius:30px;
background:
color-mix(
  in srgb,
  var(--background) 72%,
  transparent
);
box-shadow:0 30px 90px rgba(0,0,0,.38);
backdrop-filter:blur(14px)
}

.conversion-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 13px;
margin-bottom:18px;
border:1px solid rgba(255,255,255,.22);
border-radius:999px;
background:
color-mix(
  in srgb,
  var(--primary) 18%,
  transparent
);
font-size:12px;
font-weight:800;
letter-spacing:.05em
}

.conversion-badge span{
width:9px;
height:9px;
border-radius:50%;
background:#37e889;
box-shadow:0 0 16px #37e889
}

.conversion-content h1{
margin:0;
font-size:clamp(2.35rem,9vw,4.7rem);
line-height:.98;
letter-spacing:-.045em
}

.conversion-subtitle{
max-width:430px;
margin:20px auto;
font-size:1.08rem;
line-height:1.55;
color:rgba(255,255,255,.82)
}

.conversion-image{
margin:18px auto;
max-width:330px
}

.conversion-image img{
display:block;
width:100%;
max-height:330px;
object-fit:contain
}

.conversion-form{
padding:0;
border:0;
background:transparent
}

.conversion-label{
text-align:left;
font-size:13px;
font-weight:750;
color:rgba(255,255,255,.9)
}

.conversion-label input{
width:100%;
min-height:54px;
padding:0 17px;
border:1px solid rgba(255,255,255,.25);
border-radius:15px;
background:#fff;
color:#0f172a;
font-size:16px;
outline:none
}

.conversion-label input:focus{
border-color:var(--primary);
box-shadow:
0 0 0 4px
color-mix(
  in srgb,
  var(--primary) 24%,
  transparent
)
}

.conversion-button{
width:100%;
min-height:55px;
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:15px;
margin-top:12px;
padding:12px 18px;
background:
linear-gradient(
  135deg,
  var(--primary),
  color-mix(
    in srgb,
    var(--primary) 68%,
    #000
  )
);
color:#fff;
font-size:15px;
font-weight:900;
letter-spacing:.025em;
cursor:pointer;
box-shadow:
0 15px 35px
color-mix(
  in srgb,
  var(--primary) 34%,
  transparent
)
}

.conversion-button:disabled{
opacity:.7;
cursor:wait
}

.conversion-output{
display:block;
min-height:20px;
margin-top:10px;
font-size:13px;
color:
color-mix(
  in srgb,
  var(--text) 82%,
  #fff
)
}

.conversion-trust{
margin:15px 0 0;
font-size:12px;
color:rgba(255,255,255,.65)
}

.conversion-success{
min-height:100vh;
padding:35px 22px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
background:
linear-gradient(
  145deg,
  color-mix(
    in srgb,
    var(--background) 76%,
    #000
  ),
  color-mix(
    in srgb,
    var(--primary) 70%,
    #000
  )
);
color:#fff
}

.conversion-success[hidden]{
display:none
}

.conversion-success .conversion-button{
max-width:360px
}

.success-icon{
width:82px;
height:82px;
display:grid;
place-items:center;
margin-bottom:22px;
border-radius:50%;
background:
color-mix(
  in srgb,
  var(--primary) 68%,
  #22c55e
);
font-size:42px;
font-weight:900;
box-shadow:
0 0 45px
color-mix(
  in srgb,
  var(--primary) 42%,
  transparent
)
}

.success-name{
font-size:1.35rem;
font-weight:850
}

.exit-overlay{
position:fixed;
inset:0;
z-index:2147483645;
padding:20px;
display:grid;
place-items:center;
background:rgba(2,6,23,.78);
backdrop-filter:blur(7px)
}

.exit-overlay[hidden]{
display:none
}

.exit-modal{
position:relative;
width:min(100%,420px);
padding:32px 25px;
border-radius:25px;
background:#fff;
color:#111827;
text-align:center;
box-shadow:0 35px 100px rgba(0,0,0,.45)
}

.exit-icon{
width:64px;
height:64px;
display:grid;
place-items:center;
margin:0 auto 16px;
border-radius:50%;
background:#fff1c7;
color:#b66b00;
font-size:36px;
font-weight:900
}

.exit-close{
position:absolute;
right:14px;
top:10px;
border:0;
background:transparent;
font-size:28px;
cursor:pointer
}

.exit-secondary{
margin-top:12px;
border:0;
background:transparent;
color:#64748b;
cursor:pointer;
font:inherit
}

@media(max-width:600px){
.hero{min-height:45vh}
.section{padding:2rem 1rem}
.conversion-hero{padding:12px}
.conversion-content{padding:27px 18px;border-radius:23px}
.conversion-content h1{font-size:clamp(2.2rem,13vw,3.7rem)}
}