/* ========= BASE & GLOBALS ========= */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

:root {
  --brand-blue: #19b0ff;
  --brand-neon: #13ffe1;
  --brand-purple: #7f53ac;
  --brand-green: #25e0a0;
  --brand-dark: #0c111b;
  --brand-deep: #101726;
  --brand-glass: rgba(25, 164, 255, 0.10);
  --card-glass: rgba(24, 32, 58, 0.9);
  --radius: 15px;
  --orbitron: 'Orbitron', 'Segoe UI', Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  background: var(--brand-dark);
  color: #f5f7fa;
  line-height: 1.7;
  min-height: 100vh;
}

/* ========= NAVIGATION BAR ========= */
header {
  background: var(--brand-deep);
  box-shadow: 0 4px 36px 0 rgba(25,176,255,0.12);
  position: sticky; top: 0; left: 0; z-index: 1000;
}
.nav-container {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
}
.logo {
  color: var(--brand-blue);
  font-family: var(--orbitron);
  font-size: 1.52rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 1.1px;
}
nav { margin-left: auto; }
nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}
nav ul li a {
  color: #f5f7fa;
  text-decoration: none;
  font-size: 1.09rem;
  font-family: var(--orbitron);
  padding: 6px 16px;
  border-radius: 6px;
  transition: color .20s, background .19s;
  font-weight: 700;
}
nav ul li a.active, nav ul li a:hover {
  color: var(--brand-blue);
  background: #18203a;
  box-shadow: 0 4px 16px #19b0ff30;
}
@media (max-width: 850px) {
  .nav-container, .footer-content {
    flex-direction: column; gap: .7rem; align-items: flex-start;
  }
  nav ul { gap: 1rem; }
}

/* ========= HERO SECTION ========= */
.hero {
  background: linear-gradient(135deg, #18203a 40%, #111926 100%);
  text-align: center;
  padding: 5rem 0 3.2rem 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -220px;
  translate: -50% 0;
  width: 700px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #19b0ff22 0%, transparent 80%);
  filter: blur(16px);
  z-index: 0;
  animation: heroBlob 5s ease-in-out infinite alternate;
}
@keyframes heroBlob { 0%{left:45%;} 100%{left:57%;} }
.hero-content { position: relative; z-index: 2; }
.hero-content h1 {
  font-size: 2.85rem;
  font-family: var(--orbitron);
  font-weight: 900;
  letter-spacing: 1.2px;
}
.hero-content .accent {
  color: var(--brand-blue);
  text-shadow: 0 2px 14px #19b0ff33;
}
.hero-content p {
  font-size: 1.17rem;
  color: #a7c7e7;
  margin-bottom: 2.3rem;
  max-width: 580px;
  margin-inline: auto;
  font-weight: 500;
}
.cta-btn {
  padding: 1.05rem 2.5rem;
  font-weight: 800;
  font-size: 1.12rem;
  background: linear-gradient(90deg, #13c2de, #7f53ac 90%);
  color: #fffde4;
  border-radius: 33px;
  text-decoration: none;
  box-shadow: 0 7px 26px #19b0ff55,0 2px 12px #13c2de18;
  border: none;
  transition: background 0.16s, color .15s, scale .15s;
}
.cta-btn:hover {
  background: linear-gradient(90deg, #7f53ac, #13ffe1 95%);
  scale:1.035;
  color: #111926;
}

/* ========= FEATURED CARDS/GRID ========= */
.features, .about-main, .blog-list, .freebies-list, .tutorials-list, .ai-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.3rem;
  justify-content: space-between;
  margin: 3.5rem 0 3.5rem 0;
}

.feature-card, .blog-card, .freebie-card, .tutorial-card, .ai-card {
  background: var(--card-glass);
  border-radius: var(--radius);
  box-shadow: 0 4px 32px #19b0ff13, 0 1.5px 7px #7f53ac14;
  border: 1.6px solid #22335442;
  padding: 2.2rem 1.2rem;
  min-width: 240px;
  max-width: 320px;
  flex: 1 1 260px;
  margin: .5rem 0; position:relative; transition:box-shadow .19s,scale .18s,border-color .19s;
}

.feature-card:hover, .blog-card:hover, .freebie-card:hover, .tutorial-card:hover, .ai-card:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 12px 48px #19b0ff40,0 4px 18px #25e0a040;
  scale:1.03;
}

.feature-card h2, .blog-card h2, .freebie-card h2, .tutorial-card h2, .ai-card h2 {
  font-family: var(--orbitron);
  color: var(--brand-blue);
  margin-bottom: .66em;
  font-size: 1.19rem;
  letter-spacing: 1px;
}
.feature-card p, .blog-card p, .freebie-card p, .tutorial-card p, .ai-card p {
  color: #b1bdd6;
  font-size: 1.07rem;
}
/* Card meta data */
.blog-meta, .tutorial-meta {
  color: var(--brand-blue);
  font-size: .94rem;
  margin-bottom: 14px;
  font-family: var(--orbitron);
}

/* Buttons inside cards */
.tutorial-btn, .freebie-btn, .blog-btn {
  margin-top: .8em;
  color: var(--brand-blue);
  background: transparent;
  border: 1.2px solid var(--brand-blue);
  padding: .5rem 1.2rem;
  border-radius: 22px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.01rem;
  align-self: flex-start;
  transition: background .2s, color .2s;
}
.tutorial-btn:hover, .freebie-btn:hover, .blog-btn:hover {
  background: var(--brand-blue);
  color: var(--brand-dark);
}

/* ========= ABOUT PAGE ========= */
.about-header {
  background: linear-gradient(115deg,#182747,#1a1e2a 100%);
  padding: 3.2rem 0 2.2rem 0;
  text-align: center;
}
.about-header h1 {
  font-family: var(--orbitron);
  font-size: 2.3rem;
  color: var(--brand-blue);
  font-weight: 900;
  background: linear-gradient(90deg,#19b0ff,#7f53ac 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.about-header p { color: #b2cedf; font-size: 1.09rem; }
.about-main {
  flex-direction: column;
  gap: 2.6rem;
  margin-inline: auto;
  max-width: 740px;
  width: 100%;
}
.about-main>div {
  background: var(--card-glass);
  border-radius: var(--radius);
  box-shadow: 0 3px 18px #19b0ff14, 0 1.5px 7px #7f53ac14;
  border: 1.4px solid #22335450;
  padding: 2rem 1.2rem .9rem 1.2rem;
  margin-bottom: 0.7em;
}
.about-main h2 { color: var(--brand-blue); font-family: var(--orbitron); }
.about-main ul { margin:0 0 0 17px; color:#b1bdd6;font-size:1.04rem; }
.about-main li { margin-bottom: 8px; }

/* Team grid */
.team-grid { display: flex;flex-wrap:wrap;gap:1.3rem;justify-content: center;}
.team-card {
  background: #18203a99;
  border-radius: 13px;
  padding: 1.3rem .9rem .8rem .9rem;
  width: 172px; text-align:center;
  box-shadow: 0 2px 12px #19b0ff18;
  border: 1px solid #2233542a;
  transition: box-shadow .15s,scale .14s, border .16s;
}
.team-card img {
  width: 60px; height: 60px; border-radius: 50%;
  margin-bottom: 10px;
  border: 2.2px solid #25e0a081; object-fit:cover;
}
.team-card h3 { margin-bottom: 4px; color:var(--brand-blue); font-family: var(--orbitron);}
.team-role { color: #25e0a0; font-size: 0.97rem; margin-bottom: 7px; font-style: italic; }
.team-card p { color:#dde8f6; font-size: .98rem;}

/* Timeline */
.timeline-list { border-left: 2.2px solid #19b0ff44; margin-left: 7px; padding-left:26px;}
.timeline-item { position:relative;margin-bottom: 1.2em; }
.timeline-dot {
  position: absolute;left:-19px;top:7px;width:14px;height:14px;border-radius:50%;
  background: radial-gradient(circle,#19b0ff 0%,#7f53ac 100%);
  border:2.4px solid #fffde387;box-shadow:0 1px 6px #19b0ff57;
}
.timeline-date { color: #25e0a0; font-weight: 700; font-family: var(--orbitron);}
.timeline-desc { color:#b1bdd6;font-size:1.03rem;margin-left:8px;}

/* FAQ */
.faq-grid { display:flex;flex-wrap:wrap;gap:1.4rem;}
.faq-item {
  background: #232d45e6;
  padding:1.5rem 1rem .9rem 1.1rem;
  border-radius:11px;
  box-shadow:0 1.5px 6px #19b0ff17;
  border:1.3px solid #19b0ff24;
  min-width: 230px; max-width:340px; flex: 1 1 240px;
}
.faq-item h4 { color: #25e0a0; font-family: var(--orbitron);}
.faq-item p { color: #dde8f6; font-size: 1rem;}

.about-btn {
  background: var(--brand-blue);
  color: #101726;
  padding: 0.68rem 2.1rem;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--orbitron);
  font-size: 1.04rem;
  box-shadow: 0 2px 12px #19b0ff52;
  margin-top: 8px;
  display: inline-block;
  border: none;
  transition: background .14s, color .12s;
}
.about-btn:hover { background: #1175b1; color: #fffde4;}

/* ========= CONTACT (split) ========= */
.split-contact {
  width: 820px;
  max-width: 98vw;
  margin: 3.7rem auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 36px #7651c72a, 0 1.5px 7px #7f53ac18;
  display: flex; overflow: hidden; position:relative;
  opacity:0; transform: translateY(60px) scale(0.98);
  animation: cardIn 1s cubic-bezier(.5,1.8,.4,1) 0.1s forwards;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(60px) scale(0.98);}
  to   { opacity:1; transform: translateY(0) scale(1);}
}
.split-contact-info {
  background: linear-gradient(115deg,#11bdd9 60%, #24eafc 100%);
  color: #fff;
  width: 47%; padding: 3.2rem 2.3rem 3.2rem 2.5rem;
  display: flex; flex-direction: column;align-items: flex-start;justify-content: center;
  position: relative;overflow: hidden;
}
.split-contact-info::before {
  content: ""; position: absolute; left: -34px;bottom:-48px;
  width:170px;height:170px;border-radius:55%;
  background: radial-gradient(circle, #fffde439 8%, transparent 100%);
  filter: blur(4px); z-index:0;
}
.split-contact-info h2 {font-family: var(--orbitron);font-size:2.3rem;font-weight:800;letter-spacing:1.2px;}
.split-contact-info p {font-size:1.16rem;line-height:1.54;margin-top:.7em;}
.split-contact-form {
  width: 53%;
  padding:3.2rem 2.2rem 3.2rem 2em;
  background:#fff;display:flex;flex-direction:column;justify-content:center;
}
.split-contact-form form {display:flex;flex-direction:column;gap:1.1rem;width:100%;}
.split-contact-form h2 {font-family: var(--orbitron);font-size:2rem;font-weight:700;margin-bottom:.2em;color:#090f25;}
.split-label {font-size: .98rem;color:#444870;font-weight:600;opacity:.66;}
.split-contact-form input,
.split-contact-form textarea {
  padding:0.87em 1em;font-size:1rem;border-radius:7px;border:1.4px solid #e4e8ef;
  background:#f5f7fb;color:#181c27;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .13s, box-shadow .19s, background .14s;
  box-shadow: 0px 2px 10px 0 transparent;
}
.split-contact-form input:focus,
.split-contact-form textarea:focus {
  border-color: #11bdd9; background: #fff; box-shadow: 0px 3px 16px #11bdd922;}
.split-contact-form textarea {min-height: 92px;resize: vertical;}
.split-contact-form button {
  background: linear-gradient(90deg, #11bdd9 35%, #42e3c2 99%);
  color: #fff;
  font-family: var(--orbitron);font-weight:800;
  font-size:1.08rem; border:none; border-radius:25px; padding:.91em 0;
  cursor:pointer; box-shadow: 0 2px 18px #10bbea2c; letter-spacing:1.2px;
  transition:background 0.17s, transform 0.16s, box-shadow 0.18s, color .16s;
  outline:none;}
.split-contact-form button:hover {
  background: linear-gradient(90deg,#42e3c2 15%, #11bdd9 89%);
  color:#09132e;
  transform:scale(1.045) translateY(-2px);
  box-shadow: 0 4px 22px var(--brand-neon);
}

/* ======== BLOG, TUTORIAL, AI, FREEBIE, FAQ CARD SHARED ========== */

.blog-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 horizontal cards per row on desktop */
  gap: 2.3rem;
  margin: 3.5rem 0;
  width: 100%;
  justify-items: center;
}
@media (max-width: 1200px) {
  .blog-list { grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 700px) {
  .blog-list { grid-template-columns: 1fr;}
}

/* Blog Card Matching Tutorial Card */
.blog-card {
  background: #171f2fe6;    /* glassy/dark-blue */
  border: 1.5px solid #223354;
  border-radius: 13px;
  max-width: 350px;
  width: 100%;
  padding: 2.1rem 1.2rem 1.1rem 1.2rem;
  box-shadow: 0 2px 18px rgba(25,176,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
  transition: box-shadow .17s, border-color .15s, scale .13s;
}
.blog-card:hover {
  border-color: #19b0ff;
  box-shadow: 0 12px 48px #19b0ff28,0 6px 24px #7f53ac20;
  scale: 1.025;
}
.blog-card h2 {
  color: #19b0ff;
  font-size: 1.18rem;
  font-weight: 800;
  font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif;
  margin-bottom: .62em;
}
.blog-meta {
  color: #19b0ff;
  font-size: 0.93rem;
  font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif;
  margin-bottom: 13px;
}
.blog-card p {
  color: #b1bdd6;
  font-size: 1rem;
  margin-bottom: 10px;
}

/* Blog Button (exactly like tutorial-btn) */
.blog-btn {
  margin-top: .85em;
  color: #19b0ff;
  background: transparent;
  border: 1.2px solid #19b0ff;
  padding: .5rem 1.2rem;
  border-radius: 22px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.01rem;
  align-self: flex-start;
  transition: background .2s, color .2s;
  box-shadow: 0 1px 8px #19b0ff17;
  letter-spacing: .02em;
}
.blog-btn:hover {
  background: #19b0ff;
  color: #101726;
  box-shadow: 0 5px 16px #19b0ff32;
}

/* End card styling */

/* ===== FOOTER ===== */
footer {
  background: var(--brand-deep);
  color: #9baacf;
  padding: 1.6rem 0 1.1rem 0;
  width:100%;
}
.footer-content {
  max-width: 1140px;
  margin: 0 auto;
  display: flex; flex-wrap:wrap;justify-content: space-between;align-items: center;
}
.footer-content ul { display: flex;gap:1.3rem;list-style:none;}
.footer-content ul li a { color: #8bb6fd; text-decoration:none;font-size:1.05rem;transition:color .17s;}
.footer-content ul li a:hover {color:var(--brand-blue);}

/* ========= RESPONSIVE DESIGN ========= */
@media (max-width:1100px) {
  .features, .about-main, .blog-list, .freebies-list, .tutorials-list, .ai-list { gap:1.1rem; }
}
@media (max-width:900px) {
  .nav-container,.footer-content{flex-direction:column;align-items:flex-start;gap:.6rem;}
  nav ul {gap:.9rem;}
  .features,.blog-list,.freebies-list,.ai-list,.tutorials-list{flex-direction:column;align-items:center;}
  .feature-card,.blog-card,.freebie-card,.tutorial-card,.ai-card{max-width:98vw;width:95%;}
  .split-contact{flex-direction:column;max-width:99vw;}
  .split-contact-info,.split-contact-form{width:100%;padding:2.1rem 1rem;}
}
@media (max-width:600px) {
  .hero-content h1,.about-header h1,.blog-header h1{font-size:1.6rem;}
  .hero-content p,.about-header p,.blog-header p{font-size:1rem;}
  .features {gap: .7rem;}
}

/****** ADVANCED CONTACT SECTION ******/
.contact-wrapper {
  min-height: 100vh;
  background: linear-gradient(115deg, #0c111b 70%, #13baff22 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}
.contact-card {
  width: 98vw;
  max-width: 900px;
  min-height: 560px;
  background: rgba(32,44,70,0.95);
  display: flex;
  box-shadow: 0 10px 36px #13c2de37, 0 2px 16px #7f53ac27;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid #4ad7fe2e;
}
/* Contact Left */
.contact-card-left {
  flex: 1 1 360px;
  background: linear-gradient(135deg,#131e2b 60%, #13c2de44 100%);
  display: flex; flex-direction: column;
  align-items: flex-start; color: #f6fafd;
  justify-content: center; padding: 3.1rem 2.5rem 3em 2.3rem;
}
.contact-card-left h2 {
  font-size: 2.25rem;
  font-family: 'Orbitron','Segoe UI',Arial,sans-serif;
  font-weight: 800;
  margin-bottom: 0.9em;
  letter-spacing: 1px;
  color: #19b0ff;
}
.contact-card-left p {
  font-size: 1.14rem;
  line-height: 1.5;
  margin-bottom: 2em;
  color: #b7e8fe;
}
.contact-or {
  width: 100%; display: flex; align-items: center;
  margin: 1em 0;
}
.or-line {
  flex:1; height:1px; background:#25e0a046;
}
.contact-or span {
  margin: 0 1em; font-size: .97em; color: #25e0a0; font-weight: bold;
  letter-spacing: .09em;
}
.contact-options {
  display: flex; flex-direction: column; gap: .4em;
  font-size: 1.01rem; color: #9bf6ff; margin-top:.8em;
}
.contact-options a {color:#43fcee;text-decoration:underline;}
/* Contact Right (form) */
.contact-card-right {
  flex: 1 1 466px;
  background: linear-gradient(120deg,#fffde4 6%, #bbe7ffa3 94%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3rem 2.2rem 3rem 2rem;
  box-shadow:  0 4px 24px #13c2de28 inset;
}
.contact-card-right h3 {
  font-size: 1.32rem;
  margin-bottom: .56em;
  font-family: 'Orbitron','Segoe UI',Arial,sans-serif;
  color: #0e122c; font-weight: 800;
  letter-spacing: .035em;
}
.input-row { display: flex; gap: 1.3em; margin-bottom: .2em;}
.input-row input, .input-row textarea {
  flex: 1 1 50%;
  padding: .99em 1em;
  border-radius: 7px;
  border: 1.4px solid #c4e6fb;
  font-size: 1.12em;
  background: #f5fcff;
  color: #211c34;
  box-shadow: 0 2px 12px #13c2de0a;
  margin-bottom: 0;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.13s;
}
.input-row input:focus, .input-row textarea:focus {
  border-color: #13c2de;
  background: #fff;
  box-shadow: 0 4px 12px #19b0ff2e;
}
.input-row textarea { min-height: 85px; resize: vertical; width:100%; }
/* Stagger/fade-in animation */
.fade-in { opacity: 0; animation:contactRowIn .5s .13s forwards; }
.fade-in-long { opacity: 0; animation:contactRowIn .8s .23s forwards; }
@keyframes contactRowIn {to {opacity:1;}}
.contact-submit {
  background: linear-gradient(90deg, #13c2de 30%, #22e8a0 95%);
  color:#fff;font-family:'Orbitron','Segoe UI',Arial,sans-serif;
  font-weight:800;font-size:1.14em;padding:1em 0;border:none;
  border-radius:25px;
  cursor:pointer;box-shadow:0 4px 20px #19b0ff1a;
  text-shadow: 0 2px 12px #13c2de38;
  transition: background 0.16s, scale .14s;
  margin-top: 1em;
}
.contact-submit:hover {
  background: linear-gradient(90deg,#22e8a0 9%, #13c2de 96%);
  color:#161e30; scale:1.045;
}
/* Very small screen adapt */
@media (max-width: 950px) {
  .contact-card { flex-direction: column; min-width:unset;min-height:unset;}
  .contact-card-left,.contact-card-right {padding:2.1rem 1.2rem;}
}
/****** ADVANCED PRIVACY SECTION ******/
.privacy-wrapper {
  min-height: 100vh;
  background: linear-gradient(115deg, #0c111b 78%, #13baff22 100%);
  padding: 3rem 0;
  display: flex; flex-direction:column;align-items:center;
}
.privacy-header-glass {
  background: linear-gradient(90deg, #18203a 70%, #7f53ac 100%);
  box-shadow: 0 4px 28px #19b0ff19;
  border-radius: 22px;
  padding: 2.5rem 2rem 1.1rem 2rem;
  max-width: 630px;
  text-align: center;
  margin-bottom: 2.2em;
}
.privacy-header-glass h1 {
  background: linear-gradient(90deg,#26e0fc,#7f53ac 70%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  font-family:'Orbitron', 'Segoe UI', Arial, sans-serif;
  font-size: 2.15rem;
  font-weight: 900;
  margin-bottom: 0.38em;
}
.privacy-header-glass p {
  color: #afeaff;
  font-size: 1.11rem;
  font-weight: 600;
}
.privacy-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.1rem;
  margin-top: 0rem;
  width: 100%;
  max-width: 1070px;
}
.privacy-card-glass {
  background: rgba(32,44,70,0.94);
  border-radius: 15px;
  border: 1.4px solid #26e0fc45;
  box-shadow: 0 4px 28px #19b0ff18;
  padding: 2.1em 1.4em 1.1em 1.4em;
  transition: box-shadow .23s, scale .19s,border-color .14s;
  margin-bottom: 0;
  animation: privacyCardIn .7s cubic-bezier(.58,1.4,.55,1) forwards;
  opacity:0;
}
.privacy-card-glass h2 {color:#25e0a0;font-family:'Orbitron';font-size:1.13rem;display:flex;align-items:center;gap:.45em;}
.privacy-card-glass h2 span { color:#13c2de;font-size:1.25em;}
.privacy-card-glass ul {margin:0 0 0 19px;padding:0;color:#b2cedf;font-size:1.08rem;}
.privacy-card-glass li {margin-bottom:10px;line-height:1.5;}
.privacy-card-glass a {color:#26e0fc;text-decoration:underline;}
@keyframes privacyCardIn {
  0% {transform: translateY(48px) scale(.97); opacity:0;}
  100% {transform: none; opacity:1;}
}
.fade-in { animation-delay: .23s; }
.privacy-card-glass:nth-child(2) { animation-delay:.33s;}
.privacy-card-glass:nth-child(3) { animation-delay:.45s;}
.privacy-card-glass:nth-child(4) { animation-delay:.61s;}
.privacy-card-glass:nth-child(5) { animation-delay:.73s;}
.privacy-card-glass {animation-fill-mode:both;}
/* Small devices */
@media (max-width: 900px) {
  .privacy-header-glass{padding:2rem .8rem 1rem .8rem;}
  .privacy-cards-grid { grid-template-columns:1fr;}
}

.footer-socials {
  margin-top: 1.2rem;
  display: flex;
  gap: 18px;
}
.footer-socials a {
  display: inline-block;
  transition: transform 0.16s;
}
.social-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  filter: grayscale(0.08) brightness(1.12) drop-shadow(0 2px 4px #101726aa);
  transition: filter 0.19s, transform 0.14s;
}
.footer-socials a:hover .social-icon,
.footer-socials a:focus .social-icon {
  filter: none;
  transform: scale(1.14) rotate(-2deg);
}