:root{
--primary:#007AFF;
--secondary:#00C7FF;
--text:#1d1d1f;
--bg:#ffffff;
}

html {
font-size: clamp(12px, 0.9vw, 14px);
}

*{margin:0;padding:0;box-sizing:border-box}

/* Accessibility: Focus State */
a:focus,
button:focus {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

body{
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
scroll-behavior:smooth;
}

h1, h2, h3 {
  color: var(--text);
}

/* Bubble Background */
.bubble-wrapper{
position:fixed;
inset:0;
z-index:-1;
background:radial-gradient(circle at center,#fff,#f5f5f7);
overflow:hidden;
}

.bubble{
position:absolute;
background:rgba(0,122,255,.08);
border-radius:50%;
animation: rise 30s linear infinite;
}

@keyframes rise{
0%{transform:translateY(0) scale(1);opacity:0}
30%{opacity:.6}
100%{transform:translateY(-130vh) scale(1.8);opacity:0}
}

/* Hero */
.hero{
position:relative;
padding:50px 20px 0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
animation:fadeUp 1s cubic-bezier(.16,1,.3,1);
}

@keyframes fadeUp{
from{opacity:0;transform:translateY(40px)}
to{opacity:1;transform:translateY(0)}
}

.hero h1{
font-size:clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
font-family: "Arial", sans-serif;
font-weight:800;
letter-spacing:-1px;
background:linear-gradient(90deg,#1d1d1f,#007AFF,#00C7FF,#1d1d1f);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:shine 6s linear infinite;
}

@keyframes shine{
to{background-position:300%}
}

.hero p{
max-width:800px;
font-size:clamp(1rem, 1.2vw, 1.15rem);
color:#666;
font-weight:600;
margin:15px 0 25px;
}

.hero .hero-note{
font-size:0.75rem;
color:#86868b;
font-weight:600;
margin-top:20px;
}

.btn{
padding:15px 40px;
border-radius:60px;
background:#1d1d1f;
color:#fff;
font-weight:800;
font-size:1.25rem;
text-decoration:none;
transition:.4s cubic-bezier(.175,.885,.32,1.275);
box-shadow:0 20px 40px rgba(0,0,0,.1);
}

.btn:hover{
background:var(--primary);
transform:translateY(-5px) scale(1.05);
box-shadow:0 25px 50px rgba(0,122,255,.3);
}

/* Content */
.container{
max-width:1280px;
margin:0 auto 100px;
padding:0 25px;
}

.block{
margin:0 auto 70px;
text-align:center;
max-width:900px;
}

.block h2{
font-size:clamp(1.4rem, 2.2vw, 1.8rem);
font-weight:800;
margin-bottom:20px;
color:var(--text);
}

.block p{
font-size:clamp(0.95rem, 1.05vw, 1.05rem);
line-height:1.65;
color:#444;
font-weight:500;
margin-bottom:15px;
}

.block ul{
list-style:none;
}

.block li{
font-size:1.1rem;
font-size:clamp(0.95rem, 1.05vw, 1.05rem);
line-height:1.65;
margin-bottom:10px;
color:#555;
font-weight:600;
}

.block li::before{
content:"✓ ";
color:var(--primary);
font-weight:800;
}

/* Search Box */
.search-container {
  position: absolute;
  top: 20px;
  right: 5%;
  width: 280px;
  z-index: 50;
}
#home-search {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.1);
  width: 100%;
  font-size: 0.95rem;
  outline: none;
  transition: 0.3s;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
#home-search:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,122,255,0.1);
}

.suggestions-box {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
  overflow: hidden;
  display: none;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  text-decoration: none;
  color: #1d1d1f;
  transition: background 0.2s;
  border-bottom: 1px solid #f5f5f7;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: #f5f5f7; }
.suggestion-item.active { background: #f5f5f7; }
.suggestion-item .s-icon { font-size: 1.2rem; }
.suggestion-item .s-name { font-size: 0.9rem; font-weight: 600; }

@media(max-width: 768px) {
  .search-container { position: relative; top: 0; right: 0; margin: 0 auto 20px; width: 100%; max-width: 400px; }
}

/* Tools Grid & Categories */
.filter-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn { padding: 10px 20px; border-radius: 50px; border: 1px solid #e5e5ea; background: #fff; color: #666; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: 0.3s; }
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,122,255,0.2); }

.grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.tool{ background: #fff; border-radius:24px; padding:25px; display: flex; align-items: center; gap: 20px; cursor:pointer; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid rgba(0,0,0,0.04); text-decoration: none; color: inherit; text-align: left; }
.tool:hover{ transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 15px 35px rgba(0,122,255,0.08); }
.tool .icon-box{ min-width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: #f2f7ff; }
.tool-content h2{ font-size:1.2rem; font-weight:700; margin-bottom:5px; color: #111; }
.tool-content p{ font-size:0.85rem; color:#666; line-height: 1.4; font-weight: 500;}

@media(max-width:550px){ .grid{ grid-template-columns: 1fr; } }

/* Version Banner */
#version-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100%); /* Start below viewport */
  background: #1d1d1f;
  color: #fff;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  opacity: 0; /* Start transparent */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s; /* Smooth slide & fade */
}

#version-banner.show {
  transform: translateX(-50%) translateY(0); /* Slide to final position */
  opacity: 1; /* Fade in */
}

#version-banner a {
  color: #0a84ff;
  text-decoration: none;
  font-weight: 700;
}

#version-banner button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

/* =========================================
   ACCESSIBILITY – FINAL CONTRAST FIX (WCAG AA)
   ========================================= */

/* ---------- GLOBAL LINKS ---------- */
body a {
  color: #0047cc;              /* Dark blue – 4.5:1+ */
  text-decoration: none;
}
body a:hover {
  color: #003399;
}

/* ---------- FILTER BUTTON (ACTIVE) ---------- */
button.filter-btn.active {
  background-color: #0047cc;   /* darker than #007aff */
  color: #ffffff;
  border: 1px solid #0047cc;
  box-shadow: none;            /* remove glow = fixes contrast */
}

/* ---------- FILTER BUTTON (NORMAL) ---------- */
button.filter-btn {
  color: #1d1d1f;
  background: #ffffff;
}

/* ---------- FOOTER ---------- */
footer.global-footer {
  background: #f5f5f7;
  color: #333;
}

/* Footer links */
footer.global-footer a {
  color: #333;
  font-weight: 600;
}

/* Footer copyright / copy text */
footer.global-footer .copy,
footer.global-footer div.copy {
  color: #333;
  font-size: 0.85rem;
}

/* Footer hover */
footer.global-footer a:hover {
  color: #0047cc;
}

/* ---------- HEADINGS ---------- */
h1, h2, h3 {
  color: #1d1d1f;
}

/* ---------- FOCUS (Keyboard users) ---------- */
a:focus,
button:focus {
  outline: 3px solid #0047cc;
  outline-offset: 3px;
}

/* =========================================
   FINAL FOOTER CONTRAST FIX (LAST STEP)
   ========================================= */

/* Footer background */
footer.global-footer {
  background-color: #f5f5f7;
  color: #2c2c2c; /* darker base text */
}

/* Footer text safety */
footer.global-footer,
footer.global-footer a {
  color: #2c2c2c;
}


/* Footer copy / copyright text */
footer.global-footer .copy,
footer.global-footer div.copy {
  color: #000000 !important;
  font-size: 0.9rem;
}

/* Hover */
footer.global-footer a:hover {
  color: #003399 !important;
}

/* =========================================
   PERFORMANCE: REDUCED MOTION (Non-Composited Animations)
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .logo {
    animation: none !important;
  }
}