:root{
  --lav:#e8e4ff;
  --cream:#fff9f0;
  --pink:#ffe0ec;
  --bg:#f3efff;
  --ink:#2d2a45;
  --muted:#6b6688;
  --accent:#8b7cf6;
  --accent-dark:#6c5ce7;
  --r:28px;
  --shadow-out:8px 8px 20px rgba(163,154,214,.45), -8px -8px 20px rgba(255,255,255,.9);
  --shadow-in:inset 6px 6px 14px rgba(163,154,214,.45), inset -6px -6px 14px rgba(255,255,255,.9);
  --shadow-hover:14px 14px 30px rgba(140,120,240,.5), -10px -10px 24px rgba(255,255,255,1);
}

/* ---- GLOBAL RESET / TAP / FIT ---- */
*,*::before,*::after{
  box-sizing:border-box;margin:0;padding:0;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100svh;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  font-size:clamp(14px,0.9vw + 10px,17px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;touch-action:manipulation}
button,a,.btn,.card,.sw,.modal{
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
}

/* ---- HERO ---- */
.hero{
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(30px,6vh,60px) clamp(14px,4vw,24px);
  background:linear-gradient(160deg,var(--lav),var(--cream) 55%,var(--pink));
  overflow:hidden;
}
.hero-inner{text-align:center;width:100%;max-width:min(760px,100%);padding:0 4px}
.browser-logos{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,3vw,28px);margin-bottom:clamp(18px,4vh,34px);flex-wrap:wrap;
}
.logo-chrome,.logo-kiwi{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:clamp(12px,2vw,22px) clamp(14px,2vw,26px);border-radius:var(--r);
  background:var(--cream);
  box-shadow:var(--shadow-out);
  animation:pulse 2.6s ease-in-out infinite;
  will-change:transform;
}
.logo-kiwi{animation-delay:1.3s}
.logo-chrome img,.logo-kiwi img{width:clamp(48px,10vw,72px);height:clamp(48px,10vw,72px);object-fit:cover}
.logo-chrome img{border-radius:50%}
.logo-kiwi img{border-radius:16px}
.logo-chrome span,.logo-kiwi span{font-weight:800;font-size:clamp(12px,2.5vw,14px);color:var(--muted)}
.plus{font-size:clamp(30px,7vw,44px);font-weight:900;color:var(--accent);line-height:1}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
.hero-title{
  font-size:clamp(28px,7vw,62px);
  font-weight:900;
  line-height:1.1;
  background:linear-gradient(120deg,var(--accent-dark),#e84393);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:clamp(8px,2vh,16px);
  overflow-wrap:break-word;
}
.hero-sub{
  font-size:clamp(14px,3.5vw,20px);
  color:var(--muted);margin-bottom:clamp(20px,4vh,36px);
  font-weight:600;overflow-wrap:break-word;
}

/* ---- BUTTONS ---- */
.btn{
  display:inline-block;
  font-family:inherit;font-weight:800;
  font-size:clamp(14px,3vw,16px);
  padding:clamp(12px,3vw,16px) clamp(24px,6vw,36px);
  border:none;border-radius:999px;
  cursor:pointer;max-width:100%;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#a29bfe);
  color:#fff;
  box-shadow:8px 8px 18px rgba(140,120,240,.45), -6px -6px 14px rgba(255,255,255,.9);
}
.btn-primary:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--shadow-hover)}
.btn-primary:active{transform:translateY(2px) scale(.98);box-shadow:var(--shadow-in)}
.btn-ghost{
  background:transparent;color:var(--muted);
  box-shadow:var(--shadow-out);
}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-ghost:active{box-shadow:var(--shadow-in);transform:translateY(1px)}

/* ---- SECTION ---- */
.section{
  max-width:1160px;margin:0 auto;
  padding:clamp(40px,8vh,70px) clamp(14px,4vw,24px) clamp(50px,10vh,90px);
}
.section-title{font-size:clamp(24px,5vw,40px);font-weight:900;margin-bottom:6px}
.section-sub{color:var(--muted);font-weight:600;margin-bottom:clamp(24px,5vh,44px);font-size:clamp(13px,3vw,16px)}

/* ---- GRID: fits any screen ---- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(18px,4vw,34px);
}
.card{
  background:var(--cream);
  border-radius:var(--r);
  padding:clamp(20px,5vw,30px) clamp(18px,4vw,28px) clamp(18px,5vw,28px);
  box-shadow:var(--shadow-out);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
  min-width:0;max-width:100%;
  will-change:transform;
}
.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-hover)}
.card:active{transform:translateY(-2px) scale(.99)}
.card-badge{
  align-self:flex-start;
  background:var(--pink);color:#d63384;
  font-size:clamp(11px,2.5vw,12px);font-weight:800;
  padding:5px 14px;border-radius:999px;
}
.card-head{display:flex;align-items:center;gap:14px;min-width:0}
.card-logo{
  width:56px;height:56px;object-fit:cover;
  border-radius:14px;
  box-shadow:4px 4px 10px rgba(163,154,214,.4), -3px -3px 8px rgba(255,255,255,.9);
  flex:0 0 auto;
}
.card-name{
  font-size:clamp(17px,4vw,20px);font-weight:900;margin-top:6px;
  overflow-wrap:break-word;min-width:0;
}
.card-desc{
  font-size:clamp(13px,3vw,14px);color:var(--muted);
  line-height:1.55;flex:1;overflow-wrap:break-word;
}
.card-browsers{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-size:clamp(10px,2.5vw,11px);font-weight:800;
  background:var(--lav);color:var(--accent-dark);
  padding:4px 12px;border-radius:999px;
}
.card .btn{align-self:flex-start;font-size:clamp(13px,3vw,14px);padding:12px clamp(20px,5vw,28px)}

/* ---- MODAL ---- */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(45,42,69,.62);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vw,20px);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
  z-index:1000;
  overscroll-behavior:contain;
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  position:relative;
  width:100%;max-width:min(460px,100%);
  max-height:min(88svh,100%);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--cream);
  border-radius:var(--r);
  padding:clamp(22px,5vw,36px) clamp(18px,4vw,30px) clamp(20px,5vw,30px);
  box-shadow:var(--shadow-out);
  transform:scale(.85);opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  overscroll-behavior:contain;
}
.modal-overlay.open .modal{transform:scale(1);opacity:1}
.modal-close{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border:none;border-radius:50%;
  background:var(--lav);color:var(--accent-dark);
  font-size:22px;font-weight:900;cursor:pointer;
  box-shadow:var(--shadow-out);
  transition:transform .2s,box-shadow .2s;
  line-height:1;
}
.modal-close:hover{transform:scale(1.1)}
.modal-close:active{box-shadow:var(--shadow-in);transform:scale(.95)}
.modal-icon{font-size:34px;margin-bottom:8px}
.modal-title{font-size:clamp(19px,5vw,24px);font-weight:900;padding-right:44px;overflow-wrap:break-word}
.modal-version{font-size:clamp(12px,3vw,13px);color:var(--accent);font-weight:800;margin-bottom:8px}
.modal-desc{font-size:clamp(13px,3vw,14px);color:var(--muted);line-height:1.5;margin-bottom:20px;overflow-wrap:break-word}
.browser-detect{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--lav);border-radius:16px;
  padding:12px 18px;margin-bottom:22px;
  font-size:clamp(13px,3vw,14px);font-weight:700;flex-wrap:wrap;
}
.bd-value{color:var(--accent-dark);font-weight:900;text-align:right}
.steps{margin:0 0 26px 22px;display:flex;flex-direction:column;gap:12px}
.steps li{font-size:clamp(13px,3vw,14px);line-height:1.5;font-weight:600;overflow-wrap:break-word}
.steps li::marker{color:var(--accent);font-weight:900}
.modal-actions{display:flex;gap:14px;flex-wrap:wrap}
.modal-actions .btn{font-size:clamp(13px,3vw,14px);padding:13px clamp(20px,5vw,26px)}

/* ---- FOOTER ---- */
.footer{
  text-align:center;padding:clamp(24px,5vh,34px) clamp(14px,4vw,20px);
  color:var(--muted);font-size:clamp(12px,3vw,13px);font-weight:600;
}

/* ---- SMALL PHONES (<=360px) ---- */
@media(max-width:360px){
  :root{--r:22px}
  .card{padding:16px 14px}
  .grid{gap:14px}
  .logo-chrome,.logo-kiwi{padding:10px 12px;border-radius:20px}
}

/* ---- LARGE SCREENS: keep it readable, not tiny ---- */
@media(min-width:1400px){
  .hero-inner{max-width:860px}
  .card-name{font-size:22px}
  .card-desc{font-size:15px}
}

/* ---- REDUCED MOTION / BATTERY ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---- hover effects only on real hover devices (no sticky hover on touch) ---- */
@media(hover:none){
  .card:hover{transform:none;box-shadow:var(--shadow-out)}
  .btn-primary:hover{transform:none}
  .btn-ghost:hover{transform:none}
  .modal-close:hover{transform:none}
}

/* ---- MODAL LOGO ---- */
.modal-logo{
  width:72px;height:72px;object-fit:cover;
  border-radius:18px;
  box-shadow:6px 6px 14px rgba(163,154,214,.45), -4px -4px 10px rgba(255,255,255,.9);
}

/* ---- LOGIN NOTE ---- */
.note-box{
  background:linear-gradient(135deg,#fff3cd,#ffe9f0);
  border:2px dashed #e84393;
  border-radius:16px;
  padding:12px 16px;margin-bottom:20px;
  font-size:clamp(13px,3vw,14px);line-height:1.55;
  color:#5a3d5c;font-weight:700;
  overflow-wrap:break-word;
}
.note-box b{color:#d63384}
.card-note{
  background:#fff3cd;border-radius:16px;
  padding:10px 14px;
  font-size:clamp(12px,3vw,13px);line-height:1.5;
  color:#5a3d5c;font-weight:700;
  overflow-wrap:break-word;
}

/* ---- CARD ACTIONS / SITE LINK ---- */
.card-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-site{
  background:var(--lav);color:var(--accent-dark);
  font-size:clamp(13px,3vw,14px);
  padding:12px clamp(18px,4vw,24px);
  box-shadow:var(--shadow-out);
}
.btn-site:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.btn-site:active{box-shadow:var(--shadow-in);transform:translateY(1px)}
@media(hover:none){.btn-site:hover{transform:none;box-shadow:var(--shadow-out)}}

/* ---- SITE FAVICON IN BUTTON ---- */
.site-favicon{
  width:20px;height:20px;object-fit:contain;
  border-radius:5px;display:inline-block;vertical-align:middle;
  margin-right:2px;flex:0 0 auto;
}
.btn-site{display:inline-flex;align-items:center;gap:6px;justify-content:center}