/* ═══ Kai Imports · Link na bio (v3) ═══
   Estrutura da referência (Ibraba): foto em tela cheia por trás, véu translúcido,
   logo flutuando, título, duas linhas e os botões. Cores da Kai: obsidiana morna,
   laranja da foto, azul só no botão principal. Pouca informação, muito respiro. */

:root{
  --bg:oklch(9.5% 0.008 50);
  --bg-rgb:12 11 10;
  --surface:oklch(14% 0.009 55 / .82);
  --surface-hover:oklch(18% 0.011 55);
  --line:oklch(100% 0 0 / .1);
  --line-strong:oklch(100% 0 0 / .2);
  --ink:oklch(97% 0.008 80);
  --ink-2:oklch(80% 0.012 75);
  --ink-3:oklch(68% 0.012 70);
  --blue:oklch(52% 0.17 262);
  --blue-hover:oklch(58% 0.17 262);
  --blue-ink:oklch(99% 0.003 262);
  --orange:oklch(74% 0.19 50);
  --font-d:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-t:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --hero-h:max(420px,64vh);
  --col:520px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@supports (height:1svh){:root{--hero-h:max(420px,64svh)}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);min-height:100vh;min-height:100svh;font-family:var(--font-t);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;display:flex;flex-direction:column;align-items:center}
img{max-width:100%;display:block}
a{color:inherit}

/* ═══ Foto em tela cheia, fixa; a página desliza por cima ═══ */
.hero{position:fixed;top:0;left:0;right:0;height:var(--hero-h);min-height:420px;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.hero picture,.hero img{width:100%;height:100%}
.hero img{object-fit:cover;object-position:62% 22%}
.hero::before{content:"";position:absolute;inset:-100%;background-image:var(--grain);background-size:300px 300px;opacity:.06;mix-blend-mode:overlay;animation:grain 8s steps(8) infinite}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgb(var(--bg-rgb) / .16) 0%,rgb(var(--bg-rgb) / .1) 30%,rgb(var(--bg-rgb) / .58) 60%,rgb(var(--bg-rgb) / .9) 84%,var(--bg) 100%)}
@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-4%,-1%)}}

/* ═══ Coluna ═══ */
.page{position:relative;z-index:1;width:100%;max-width:var(--col);padding:calc(var(--hero-h) - 33vh) max(22px,env(safe-area-inset-right)) max(48px,calc(28px + env(safe-area-inset-bottom))) max(22px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;text-align:center}

.logo-wrap,.tagline,.desc,.links,.badges,.foot{opacity:0;animation:rise .9s var(--ease) forwards;animation-delay:calc(.09s * var(--i,0) + .05s)}
@supports (height:1svh){.page{padding-top:calc(var(--hero-h) - 33svh)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.logo-wrap{display:flex;justify-content:center;margin-bottom:22px;line-height:0;animation:rise .9s var(--ease) .05s forwards,float 4.8s ease-in-out 1s infinite}
.logo{width:128px;height:auto;filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.tagline{font-family:var(--font-d);font-size:21px;font-weight:600;color:var(--ink-2);text-shadow:0 1px 14px rgba(0,0,0,.55);margin-bottom:22px}
.desc{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:34px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.desc strong{display:block;color:var(--ink);font-weight:600}

/* ═══ Botões ═══ */
.links{width:100%;display:flex;flex-direction:column;gap:12px}
.link{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:15px 18px;border-radius:14px;text-decoration:none;color:var(--ink);
  font-family:var(--font-d);font-size:16.5px;font-weight:600;letter-spacing:-.005em;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .25s ease,background .25s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.link:active{transform:scale(.985)}
.link:focus-visible{outline:2px solid var(--blue-hover);outline-offset:3px;border-color:var(--line-strong)}
.link:focus-visible .arrow{color:var(--ink)}
.icon{flex:0 0 22px;width:22px;height:22px;color:var(--ink)}
.icon svg{width:22px;height:22px;display:block}
.label{flex:1;text-align:left;line-height:1.2}
.arrow{flex:0 0 18px;width:18px;height:18px;color:var(--ink-3);transition:transform .4s var(--ease),color .25s ease}
.arrow svg{width:18px;height:18px;display:block}
@media (hover:hover) and (pointer:fine){
  .link:hover{transform:translateY(-2px);border-color:var(--line-strong);background:var(--surface-hover)}
  .link:hover .arrow{transform:translateX(3px);color:var(--ink)}
}
.link--primary{position:relative;overflow:hidden;background:var(--blue);border-color:transparent;color:var(--blue-ink);box-shadow:0 16px 36px -16px oklch(52% 0.17 262 / .8)}
.link--primary .icon,.link--primary .arrow{color:var(--blue-ink)}
.link--primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);transform:translateX(-140%);animation:sheen 5.5s var(--ease) 2s infinite;pointer-events:none}
@keyframes sheen{0%{transform:translateX(-140%)}22%,100%{transform:translateX(320%)}}
@media (hover:hover) and (pointer:fine){.link--primary:hover{background:var(--blue-hover);border-color:transparent}}

/* ═══ Provas ═══ */
.badges{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px 0 0}
.badges li{font-size:12px;font-weight:500;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:7px 12px}

/* ═══ Rodapé ═══ */
.foot{margin-top:48px;font-size:11.5px;line-height:1.7;color:var(--ink-3)}
.foot p{margin:0}
.foot-brand{font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--ink-2);margin-bottom:6px}
.foot-brand span{color:var(--orange)}

/* ═══ Telas ═══ */
@media (min-width:768px){
  :root{--hero-h:clamp(520px,66vh,820px);--col:600px}
  .hero{min-height:520px}
  .hero img{object-position:50% 30%}
  .page{padding-top:calc(var(--hero-h) - 44vh);padding-bottom:max(72px,calc(48px + env(safe-area-inset-bottom)))}
  .logo{width:150px}
  .tagline{font-size:23px}
  .link{min-height:60px;font-size:17px}
}
@media (max-width:380px){
  .logo{width:116px}
  .page{padding-left:18px;padding-right:18px}
  .link{font-size:15.5px;padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){
  .logo-wrap,.tagline,.desc,.links,.badges,.foot{animation:none!important;opacity:1!important;transform:none!important}
  .hero::before,.link--primary::after{animation:none!important}
  .link,.arrow{transition:none}
}