/* /public/assets/styles/components_critical.css
   - Only what is needed for first paint (Header+Hero+Searchbar+Buttons+Trust)
   - Everything else moved to components_app.css
*/

/* ==========================================================
   RESET / BASICS
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  color:var(--text);
  font-family:var(--ff);
  line-height:var(--lh);
  font-weight:var(--fw-regular);
  overflow-x:hidden;
  background:var(--bg);

  overflow-y:auto;
  scrollbar-gutter:stable both-edges;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{font-size:var(--p)}

h1,h2,h3,h4,h5,h6{
  margin:0 0 .6em;
  font-family:var(--ff);
  line-height:var(--lh-head);
  color:var(--text);
}

h1{font-size:var(--h1); font-weight:var(--fw-black)}
h2{font-size:var(--h2); font-weight:var(--fw-bold)}
h3{font-size:var(--h3); font-weight:var(--fw-bold)}
h4{font-size:var(--h4); font-weight:var(--fw-semibold)}
h5{font-size:var(--h5); font-weight:var(--fw-semibold)}
h6{font-size:var(--h6); font-weight:var(--fw-medium)}

p{
  margin:0 0 1em;
  font-size:var(--p);
  color:var(--muted);
}

/* Anchor offset for fixed header */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px)+var(--header-min-h)+var(--header-offset)+12px)}
[id],section,.results,.metrics{scroll-margin-top:calc(env(safe-area-inset-top,0px)+var(--header-min-h)+var(--header-offset)+12px)}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
input,select,textarea{font-family:inherit}

.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.is-hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================
   PAGE HELPERS (critical vars only)
   ========================================================== */
:root{
  --footer-peek:128px;
  --lava-b-duration:34s;

  /* Some buttons use these shadows */
  --step-elev-base:0 6px 18px rgba(12,24,60,.10);
  --step-elev-med:0 12px 28px rgba(12,24,60,.14);
  --step-elev-big:0 22px 60px rgba(12,24,60,.18);
}

/* ==========================================================
   HERO (above the fold)
   ========================================================== */
.hero{
  position:relative;
  box-sizing:border-box;
  min-height:calc(100vh - var(--footer-peek));
  padding:calc(var(--header-min-h) + var(--header-offset) + 140px) 0 0;
  overflow:hidden;
}

.hero__inner{
  text-align:center;
  position:relative;
  z-index:1;
}

.hero__title{
  font-size:var(--fs-hero);
  font-weight:700;
  letter-spacing:.05px;
  margin:0 0 14px;
  color:var(--text);
  line-height:var(--lh-head);
}

.hero__title .yt{color:var(--yt-red)}

.hero__subtitle{
  color:var(--muted);
  font-size:var(--fs-700);
  line-height:1.55;
  margin:0 auto 34px;
  max-width:820px;
}

/* Background wrapper */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:none;
  mask-image:none;
}

/* Single blob (critical) */
.hero-blob{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:.44;
  filter:saturate(1.03) blur(0.7px);
  contain:layout paint;
}

/* Only the blob you actually use in index.html */
.blob-b{
  right:-360px;
  top:-520px;
  width:1500px;
  height:1100px;
  background:radial-gradient(66% 62% at 60% 40%, rgba(255,0,0,.38), transparent 70%);
  transform-origin:70% 20%;
  animation: lava-b var(--lava-b-duration) ease-in-out infinite alternate;
}

/* ==========================================================
   HERO TYPO — Mobile polish
   ========================================================== */
@media (max-width:720px){
  .hero__title{
    font-size:clamp(2.05rem, 5.8vw, 2.65rem);
    line-height:1.08;
    letter-spacing:-0.02em;
    text-align:left;
    text-wrap:balance;
  }
  .hero__title br{display:none}
  .hero__subtitle{
    font-size:clamp(1.05rem, 3.6vw, 1.18rem);
    line-height:1.55;
    max-width:32rem;
    text-wrap:pretty;
    text-align:left;
  }
  .hero__subtitle br{display:none}
}

@media (max-width:400px){
  .hero__title{
    font-size:clamp(1.9rem, 7vw, 2.35rem);
    line-height:1.06;
  }
  .hero__subtitle{font-size:1.02rem}
}

/* ==========================================================
   HERO WORD ANIMATION (if used)
   ========================================================== */
.hero__title--animated{display:inline-block}

.hero-word{
  display:inline-block;
  opacity:0;
  transform:translateY(-16px);
  animation-name:hero-word-in;
  animation-duration:0.55s;
  animation-timing-function:cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode:forwards;
}

@keyframes hero-word-in{
  to{opacity:1;transform:translateY(0)}
}

/* ==========================================================
   SEARCHBAR & BUTTONS (above fold)
   ========================================================== */
.searchbar{
  display:grid;
  grid-template-columns:170px 1fr 170px;
  gap:16px;
  align-items:center;
  background:var(--surface);
  border:0px solid var(--border);
  border-radius:var(--r-lg);
  padding:16px;
  box-shadow:var(--shadow-md);
}

/* prevent grid overflow */
.searchbar > *{ min-width:0; }

.searchbar select,
.searchbar input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;

  height:64px;
  border:0px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:var(--r-sm);
  padding:0 18px;
  font-size:1.1rem;
  outline:none;
  transition:border-color .12s,box-shadow .12s,background .12s;
}

.searchbar select{color:var(--muted-2)}
.searchbar input::placeholder{color:var(--muted-2)}

.searchbar select:focus,
.searchbar input:focus{
  border-color:var(--blue-500);
  box-shadow:0 0 0 5px rgba(34,108,224,.20);
  background:#fff;
}

/* Mobile stack */
@media (max-width:720px){
  .searchbar{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
  }
  .searchbar > *{ grid-column:1 / -1; }
  .searchbar select,
  .searchbar input{height:56px}
  .searchbar .btn-primary{width:100%;height:56px}
}

/* hide native arrow */
#locale{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:44px;
}

/* Chevron (kept as-is; recommended: replace :has() with a class to avoid perf cost) */
.searchbar:has(#locale){position:relative}

.searchbar:has(#locale)::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left: calc(16px + 170px - 14px - 18px);
  top:  calc(16px + 32px - 9px);
  pointer-events:none;
  opacity:.72;

  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  transition:transform .18s ease, opacity .18s ease;
}

.searchbar:has(#locale:focus)::after{
  transform:rotate(180deg);
  opacity:1;
}

@media (max-width:720px){
  .searchbar:has(#locale)::after{
    left:auto;
    right: calc(14px + 18px);
    top:   calc(14px + 28px - 9px);
  }
}

/* ==========================================================
   BTN PRIMARY — used in hero
   ========================================================== */
.btn-primary{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1;
  white-space:nowrap;

  font-size:1.1rem;
  height:64px;
  border:0;
  padding:16px 24px;
  border-radius:var(--r-sm);
  font-weight:700;
  letter-spacing:0.02em;
  cursor:pointer;

  background:linear-gradient(135deg,var(--yt-red-600),var(--yt-red-500) 55%,var(--yt-red-400));
  color:#fff;

  box-shadow:
    0 10px 26px rgba(255,0,0,.14),
    0 6px 18px rgba(12,24,60,.10);

  transition:
    transform .18s cubic-bezier(.22,.8,.36,1),
    box-shadow .18s ease,
    filter .18s ease;
}

.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.22),
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,0) 70%
  );

  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
}

.btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}

.btn-primary:hover::after{
  opacity:1;
  transform:translateY(0);
}

.btn-primary:active{
  transform:translateY(0);
  filter:brightness(.99);
}

.btn-primary:focus-visible{outline:none}

.btn-primary--compact{height:48px;padding:0 16px;font-weight:700}

/* Analyze spinner */
.btn-primary__spinner{
  width:16px;
  height:16px;
  min-width:16px;
  min-height:16px;

  display:inline-block;
  vertical-align:middle;

  border-radius:50%;
  border:2px solid rgba(148,163,184,.65);
  border-top-color:rgba(148,163,184,.25);

  flex:0 0 auto;
  box-sizing:border-box;

  animation:btn-spin .75s linear infinite;
}

@keyframes btn-spin{to{transform:rotate(360deg)}}

.btn-primary[disabled],
.btn-primary.btn-disabled{
  cursor:not-allowed;
  background:#f5f5f7;
  color:#9ca3af;
  box-shadow:none;
  opacity:1;
  transform:none;
  filter:none;
}
.btn-primary[disabled]:hover,
.btn-primary.btn-disabled:hover{
  transform:none;
  filter:none;
}

.btn-primary[disabled] .btn-primary__spinner,
.btn-primary.btn-disabled .btn-primary__spinner{
  border-color: rgba(31,41,55,.55) !important;
  border-top-color: rgba(31,41,55,.18) !important;
}

.btn-primary__label{display:inline-block; line-height:1; }

/* ==========================================================
   TRUST (avatars line in hero)
   ========================================================== */
.trust{
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin:18px 0 36px;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.trust__avatars{
  display:flex;
  align-items:center;
}

.trust .avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  margin-left:-14px;
  box-shadow:0 6px 18px rgba(12,24,60,.14);
  pointer-events:none;
  user-drag:none;
  -webkit-user-drag:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  user-select:none;
}

.trust .avatar:first-child{margin-left:0}

.trust__label{
  font-weight:500;
  font-size:clamp(1.05rem,.9rem + 1.1vw,1.4rem);
  line-height:1;
  color:var(--muted-2);
  letter-spacing:.2px;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

@media (max-width:560px){
  .trust{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }
  .trust__avatars{justify-content:center}
  .trust .avatar{
    width:44px;
    height:44px;
    margin-left:-10px;
  }
  .trust .avatar:first-child{margin-left:0}
  .trust__label{
    font-size:1rem;
    line-height:1.3;
    white-space:normal;
  }
}

@media (max-width:400px){
  .trust .avatar{
    width:40px;
    height:40px;
    margin-left:-8px;
  }
}

/* ==========================================================
   RESPONSIVE anchor helper
   ========================================================== */
@media (max-width:720px){
  [id],section,.results,.metrics{
    scroll-margin-top:calc(env(safe-area-inset-top,0px)+var(--header-min-h)+var(--header-offset)+8px)
  }
}

/* ==========================================================
   Keyframes (only what critical uses)
   ========================================================== */
@keyframes lava-b{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-12px,10px,0) scale(1.02)}
}