/*
Theme Name: Trust SEO
Theme URI: https://trustseo.ru
Author: Trust SEO Team
Author URI: https://trustseo.ru
Description: Современная тема для SEO-агентства с внедрением под ключ
Version: 1.0.0
Text Domain: trustseo
*/

/* ===== ОСНОВНЫЕ СТИЛИ ===== */
*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#0c1420;
  overflow-x:hidden;
}

:root{
 --accent:#2f7cff;
 --glass:rgba(255,255,255,.16);
 --glass-border:rgba(255,255,255,.28);
 --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 --gradient-blue: linear-gradient(135deg, #3a86ff 0%, #2563eb 50%, #1d4ed8 100%);
}

/* ===== HEADER ===== */
header{
 position:fixed; inset:0 0 auto 0;
 height:70px;
 background:rgba(255,255,255,.92);
 backdrop-filter:blur(10px);
 border-bottom:1px solid rgba(0,0,0,.06);
 z-index:10;
}
.header-inner{
 max-width:1200px;
 height:100%;
 margin:auto;
 padding:0 20px;
 display:grid;
 grid-template-columns: auto 1fr auto;
 align-items:center;
 column-gap:26px;
}
.brand img{
 height:46px;
 filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));
}

nav{
 display:flex;
 justify-content:center;
 gap:22px;
 align-items:center;
}
nav a{
 font-weight:700;
 font-size:14px;
 color:#1c2434;
 opacity:.7;
 text-decoration:none;
}
nav a:hover{opacity:1}
nav a.current-menu-item,
nav a.current-page-item{opacity:1; color:#2f7cff;}

.header-btn{
 justify-self:end;
 background:linear-gradient(180deg,#3a86ff,#2563eb);
 color:#fff;
 padding:10px 18px;
 border-radius:14px;
 font-weight:800;
 text-decoration:none;
 box-shadow:0 10px 24px rgba(47,124,255,.35);
 display:flex;
 align-items:center;
 gap:8px;
 transition:.2s ease;
}
.header-btn:hover{transform:translateY(-1px)}

.header-btn-icon{
 display:none;
 width:20px;
 height:20px;
}
.header-btn-text{display:inline}

/* Бургер-меню */
.burger{
 display:none;
 flex-direction:column;
 gap:5px;
 width:28px;
 height:28px;
 background:none;
 border:none;
 cursor:pointer;
 padding:0;
 z-index:100;
}
.burger span{
 display:block;
 width:100%;
 height:3px;
 background:#1c2434;
 border-radius:2px;
 transition:.3s ease;
}
.burger.active span:nth-child(1){
 transform:rotate(45deg) translate(8px,8px);
}
.burger.active span:nth-child(2){
 opacity:0;
}
.burger.active span:nth-child(3){
 transform:rotate(-45deg) translate(7px,-7px);
}

/* Мобильное меню */
.nav-mobile{
 position:fixed;
 top:70px;
 left:0;
 right:0;
 background:rgba(255,255,255,.98);
 backdrop-filter:blur(20px);
 border-bottom:1px solid rgba(0,0,0,.06);
 padding:20px;
 display:none;
 z-index:1000;
 box-shadow:0 4px 20px rgba(0,0,0,.1);
}
.nav-mobile.active{
 display:block;
 animation:slideDown .3s ease;
}
@keyframes slideDown{
 from{
  opacity:0;
  transform:translateY(-20px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}
.nav-mobile a{
 display:block;
 padding:14px 0;
 font-weight:700;
 font-size:16px;
 color:#1c2434;
 text-decoration:none;
 border-bottom:1px solid rgba(0,0,0,.05);
}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile a:hover{color:#2f7cff}

/* ===== HERO ===== */
.hero{
 min-height:100vh;
 padding-top:70px;
 position:relative;
 overflow:hidden;
}

.hero-bg{
 position:absolute; inset:0;
 background:url("assets/hero.jpg") center/cover no-repeat;
 transform:scale(1.1);
 transition:transform 0.3s ease-out;
 will-change:transform;
}
.hero:hover .hero-bg{
 transform:scale(1.15);
}

.hero-haze{
 position:absolute; inset:0;
 background:
 radial-gradient(900px 420px at 50% 20%, rgba(255,255,255,.65), transparent 60%),
 linear-gradient(180deg, rgba(255,255,255,.25), rgba(10,20,30,.65));
}
.hero-haze::before{
 content:"";
 position:absolute;
 inset:0;
 background:
  radial-gradient(circle at 20% 50%, rgba(47,124,255,.15) 0%, transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(118,75,162,.12) 0%, transparent 50%);
 animation:float 20s ease-in-out infinite;
}
@keyframes float{
 0%, 100%{transform:translate(0, 0) scale(1);}
 33%{transform:translate(30px, -30px) scale(1.1);}
 66%{transform:translate(-20px, 20px) scale(0.9);}
}

.hero-inner{
 position:relative;
 max-width:1200px;
 margin:auto;
 padding:90px 20px 40px;
 text-align:center;
}

.kicker{
 display:inline-block;
 padding:8px 18px;
 background:linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.75) 100%);
 border:1px solid rgba(255,255,255,.3);
 border-radius:999px;
 font-size:12px;
 font-weight:800;
 color:#111;
 backdrop-filter:blur(10px);
 box-shadow:0 8px 24px rgba(0,0,0,.15);
 animation:fadeInDown 0.8s ease-out;
 transform:translateY(0);
}
@keyframes fadeInDown{
 from{
  opacity:0;
  transform:translateY(-20px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

h1{
 margin:20px 0 10px;
 font-size:clamp(40px, 6vw, 72px);
 line-height:1.05;
 color:#0e1624;
 font-weight:900;
 letter-spacing:-.03em;
 background:linear-gradient(135deg, #0e1624 0%, #1c2b44 50%, #0e1624 100%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 background-size:200% auto;
 animation:fadeInUp 1s ease-out 0.2s both, gradientShift 8s ease infinite;
 position:relative;
}
@keyframes fadeInUp{
 from{
  opacity:0;
  transform:translateY(30px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}
@keyframes gradientShift{
 0%, 100%{background-position:0% 50%;}
 50%{background-position:100% 50%;}
}
h1::after{
 content:"";
 position:absolute;
 bottom:-10px;
 left:50%;
 transform:translateX(-50%);
 width:100px;
 height:4px;
 background:linear-gradient(90deg, transparent, var(--accent), transparent);
 border-radius:2px;
 animation:expandLine 1s ease-out 1.2s both;
}
@keyframes expandLine{
 from{width:0; opacity:0;}
 to{width:100px; opacity:1;}
}

.sub{
 font-size:clamp(16px, 2.2vw, 20px);
 font-weight:600;
 color:#1c2b44;
 animation:fadeInUp 1s ease-out 0.4s both;
 line-height:1.6;
 max-width:800px;
 margin:0 auto;
}

/* ===== BUTTONS ===== */
.hero-buttons{
 margin-top:32px;
 display:flex;
 gap:14px;
 justify-content:center;
 flex-wrap:wrap;
 animation:fadeInUp 1s ease-out 0.6s both;
}

.hero-btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 height:46px;
 padding:0 18px;
 border-radius:16px;
 font-weight:800;
 text-decoration:none;
 box-shadow:0 12px 26px rgba(0,0,0,.16);
 transition:.15s ease;
}

.hero-btn-primary{
 background:var(--gradient-blue);
 color:#fff;
 position:relative;
 overflow:hidden;
}
.hero-btn-primary::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 100%);
 opacity:0;
 transition:opacity 0.3s ease;
}
.hero-btn-primary::after{
 content:"";
 position:absolute;
 inset:-2px;
 background:var(--gradient-blue);
 border-radius:18px;
 z-index:-1;
 filter:blur(20px);
 opacity:0;
 transition:opacity 0.3s ease;
}
.hero-btn-primary:hover{
 transform:translateY(-3px) scale(1.02);
 box-shadow:0 20px 40px rgba(47,124,255,.4);
}
.hero-btn-primary:hover::before{opacity:1}
.hero-btn-primary:hover::after{opacity:0.6}

.hero-btn-secondary{
 background:rgba(255,255,255,.92);
 color:#0e1624;
 border:2px solid rgba(255,255,255,.3);
 backdrop-filter:blur(10px);
 position:relative;
 overflow:hidden;
}
.hero-btn-secondary::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(135deg, rgba(47,124,255,.1) 0%, transparent 100%);
 opacity:0;
 transition:opacity 0.3s ease;
}
.hero-btn-secondary:hover{
 transform:translateY(-3px) scale(1.02);
 background:rgba(255,255,255,1);
 box-shadow:0 16px 36px rgba(0,0,0,.2);
}
.hero-btn-secondary:hover::before{opacity:1}

/* ===== CARDS ===== */
.cards{
 margin-top:60px;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:20px;
}

.card{
 background:linear-gradient(135deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.12) 100%);
 backdrop-filter:blur(16px);
 border:2px solid rgba(255,255,255,.2);
 border-radius:24px;
 padding:20px;
 display:flex;
 gap:16px;
 align-items:center;
 color:#fff;
 box-shadow:0 20px 50px rgba(0,0,0,.3);
 text-decoration:none;
 transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 position:relative;
 overflow:hidden;
 transform-style:preserve-3d;
}
.card::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(135deg, rgba(47,124,255,.2) 0%, rgba(118,75,162,.15) 100%);
 opacity:0;
 transition:opacity 0.5s ease;
 border-radius:22px;
}
.card::after{
 content:"";
 position:absolute;
 inset:-2px;
 background:linear-gradient(135deg, rgba(47,124,255,.4), rgba(118,75,162,.3));
 border-radius:24px;
 z-index:-1;
 filter:blur(20px);
 opacity:0;
 transition:opacity 0.5s ease;
}
.card:hover{
 transform:translateY(-12px) rotateX(2deg) rotateY(-2deg) scale(1.02);
 box-shadow:0 30px 70px rgba(0,0,0,.4);
 border-color:rgba(255,255,255,.4);
}
.card:hover::before{opacity:1}
.card:hover::after{opacity:0.8}
.card:nth-child(1){animation:fadeInUp 1s ease-out 0.8s both}
.card:nth-child(2){animation:fadeInUp 1s ease-out 0.9s both}
.card:nth-child(3){animation:fadeInUp 1s ease-out 1s both}
.card:nth-child(4){animation:fadeInUp 1s ease-out 1.1s both}
.card:nth-child(5){animation:fadeInUp 1s ease-out 1.2s both}
.card:nth-child(6){animation:fadeInUp 1s ease-out 1.3s both}

.thumb{
 width:150px;
 height:105px;
 border-radius:18px;
 overflow:hidden;
 border:2px solid rgba(255,255,255,.3);
 transition:all 0.5s ease;
 position:relative;
 flex-shrink:0;
}
.thumb::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(135deg, rgba(47,124,255,.2) 0%, rgba(118,75,162,.2) 100%);
 opacity:0;
 transition:opacity 0.5s ease;
 z-index:1;
}
.card:hover .thumb{
 transform:scale(1.1) rotate(2deg);
 border-color:rgba(255,255,255,.5);
}
.card:hover .thumb::before{opacity:1}
.thumb img{
 width:100%; height:100%;
 object-fit:cover;
 transform:scale(1.15);
 transition:transform 0.6s ease;
}
.card:hover .thumb img{
 transform:scale(1.3);
}

.card h3{
 margin:0 0 6px;
 font-size:18px;
 font-weight:800;
 position:relative;
 z-index:1;
 transition:transform 0.3s ease;
}
.card:hover h3{
 transform:translateX(4px);
}
.card p{
 margin:0;
 font-size:13px;
 opacity:.9;
 line-height:1.5;
 position:relative;
 z-index:1;
 transition:opacity 0.3s ease;
}
.card:hover p{
 opacity:1;
}

/* ===== FOOTER ===== */
.footer{
 margin-top:60px;
 text-align:center;
 color:rgba(255,255,255,.7);
 font-size:13px;
 animation:fadeIn 1.5s ease-out 1.5s both;
}
@keyframes fadeIn{
 from{opacity:0;}
 to{opacity:1;}
}

/* Декоративные частицы */
.particles{
 position:absolute;
 inset:0;
 pointer-events:none;
 overflow:hidden;
}
.particle{
 position:absolute;
 width:4px;
 height:4px;
 background:rgba(255,255,255,.4);
 border-radius:50%;
 animation:particleFloat 15s infinite ease-in-out;
}
@keyframes particleFloat{
 0%{
  transform:translateY(100vh) translateX(0) scale(0);
  opacity:0;
 }
 10%{
  opacity:1;
 }
 90%{
  opacity:1;
 }
 100%{
  transform:translateY(-100px) translateX(100px) scale(1);
  opacity:0;
 }
}
.particle:nth-child(1){left:10%; animation-delay:0s; animation-duration:20s;}
.particle:nth-child(2){left:30%; animation-delay:2s; animation-duration:25s;}
.particle:nth-child(3){left:50%; animation-delay:4s; animation-duration:18s;}
.particle:nth-child(4){left:70%; animation-delay:6s; animation-duration:22s;}
.particle:nth-child(5){left:90%; animation-delay:8s; animation-duration:19s;}

/* ===== СТРАНИЦЫ ===== */
.page-content{
 padding-top:90px;
 background:#f6f8fb;
 min-height:100vh;
}
.container{
 max-width:1200px;
 margin:0 auto;
 padding:0 24px;
}

/* Стили для страниц (about, services и т.д.) */
:root{
 --bg: #f6f8fb;
 --text: #0f172a;
 --muted: #4b5563;
 --muted2:#6b7280;
 --card: rgba(255,255,255,0.78);
 --stroke: rgba(15, 23, 42, 0.10);
 --shadow: 0 14px 40px rgba(2, 6, 23, 0.10);
 --shadow2: 0 10px 24px rgba(2, 6, 23, 0.10);
 --blur: blur(12px);
 --radius: 22px;
 --blue: #2f6df6;
 --blue2:#1d4ed8;
 --green:#56c067;
 --max: 1120px;
}

.page-content body{
 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
 color:var(--text);
 background: var(--bg);
}

.page-content .container{width: min(var(--max), 92vw); margin:0 auto;}

/* Breadcrumbs */
.crumbs{
 display:inline-flex;
 align-items:center;
 gap:10px;
 padding: 8px 12px;
 border-radius: 999px;
 background: rgba(255,255,255,0.72);
 border: 1px solid rgba(15,23,42,0.10);
 backdrop-filter: blur(10px);
 font-weight: 700;
 font-size: 13px;
 color: #1f2937;
 width: fit-content;
 margin-bottom: 14px;
}
.crumbs a{opacity:.88; text-decoration:none;}
.crumbs a:hover{
 opacity:1;
 text-decoration: underline;
 text-underline-offset: 3px;
}
.crumbs .sep{opacity:.5}

.page-content h1{
 margin:0;
 font-size: clamp(40px, 5vw, 64px);
 line-height: 1.02;
 letter-spacing: -0.03em;
 color:var(--text);
}
.lead{
 margin: 14px 0 0;
 max-width: 64ch;
 color: #24324a;
 font-size: 16px;
 line-height: 1.55;
 font-weight: 600;
}
.hero-actions{
 margin-top: 22px;
 display:flex;
 gap: 12px;
 flex-wrap: wrap;
}

section{padding: 54px 0;}
.fade-in{
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible{
 opacity: 1;
 transform: translateY(0);
}
@keyframes float{
 0%, 100%{ transform: translateY(0px); }
 50%{ transform: translateY(-10px); }
}
.float-animation{
 animation: float 6s ease-in-out infinite;
}

.section-head{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap: 20px;
 margin-bottom: 22px;
}
.page-content h2{
 margin:0;
 font-size: clamp(28px, 3.3vw, 40px);
 letter-spacing: -0.02em;
 line-height: 1.1;
 color:var(--text);
}
.page-content .sub{
 margin:0;
 color: var(--muted);
 font-weight: 600;
 line-height: 1.5;
 max-width: 70ch;
}

.grid3{
 display:grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 18px;
}
@media(max-width: 768px){
 .grid3{
  grid-template-columns: 1fr;
  gap: 14px;
 }
}
.glass{
 background: var(--card);
 border: 1px solid rgba(15,23,42,0.10);
 border-radius: var(--radius);
 backdrop-filter: var(--blur);
 box-shadow: var(--shadow2);
 padding: 20px;
 transition: all 0.3s ease;
}
.glass:hover{
 transform: translateY(-2px);
 box-shadow: 0 16px 32px rgba(2, 6, 23, 0.12);
}
.glass h3{
 margin:0 0 8px;
 font-size: 16px;
 letter-spacing: -0.01em;
 color:var(--text);
}
.glass p{
 margin:0;
 color: var(--muted2);
 font-weight: 600;
 line-height: 1.55;
 font-size: 14px;
}

/* TEAM */
.team-grid{
 display:grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 24px;
}
.person{
 display:flex;
 flex-direction: column;
 align-items:center;
 text-align: center;
 gap: 20px;
 padding: 32px 24px;
 position: relative;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 cursor: pointer;
 overflow: hidden;
 background: var(--card);
 border: 1px solid rgba(15,23,42,0.10);
 border-radius: var(--radius);
 backdrop-filter: var(--blur);
 box-shadow: var(--shadow2);
}
.person::before{
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(47, 109, 246, 0.03) 0%, rgba(86, 192, 103, 0.03) 100%);
 opacity: 0;
 transition: opacity 0.4s ease;
}
.person:hover{
 transform: translateY(-4px);
 box-shadow: 0 20px 48px rgba(2, 6, 23, 0.15);
}
.person:hover::before{
 opacity: 1;
}
.person:hover .avatar{
 transform: scale(1.05);
 box-shadow: 0 20px 40px rgba(2, 6, 23, 0.2);
}
.person:hover .avatar img{
 transform: scale(1.1);
}
.avatar{
 width: 180px;
 height: 180px;
 border-radius: 32px;
 overflow:hidden;
 border: 3px solid rgba(47, 109, 246, 0.15);
 background: rgba(255,255,255,0.9);
 flex: 0 0 auto;
 box-shadow: 0 16px 40px rgba(2, 6, 23, 0.15);
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 position: relative;
}
.avatar::after{
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(47, 109, 246, 0.1) 0%, rgba(86, 192, 103, 0.1) 100%);
 opacity: 0;
 transition: opacity 0.4s ease;
}
.person:hover .avatar::after{
 opacity: 1;
}
.avatar img{
 width:100%; 
 height:100%;
 object-fit: cover;
 transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.person-info{
 width: 100%;
}
.person h3{
 margin:0 0 12px;
 font-size: 24px;
 letter-spacing: -0.02em;
 font-weight: 800;
 background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.role{
 margin: 0 auto 16px;
 display:inline-flex;
 align-items: center;
 gap: 6px;
 padding: 12px 18px;
 border-radius: 999px;
 background: linear-gradient(135deg, rgba(86,192,103,0.15) 0%, rgba(47, 109, 246, 0.15) 100%);
 border: 2px solid rgba(86,192,103,0.25);
 color:#116b2b;
 font-weight: 900;
 font-size: 13px;
 width: fit-content;
 transition: all 0.3s ease;
}
.person:hover .role{
 transform: scale(1.05);
 background: linear-gradient(135deg, rgba(86,192,103,0.2) 0%, rgba(47, 109, 246, 0.2) 100%);
 border-color: rgba(86,192,103,0.35);
}
.person-bio{
 margin: 16px 0 0;
 color: var(--muted2);
 font-weight: 600;
 line-height: 1.6;
 font-size: 15px;
 max-width: 100%;
}

/* CTA block */
.cta-block{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap: 24px;
 padding: 32px;
}
.cta-block h3{
 margin:0;
 font-size: 24px;
 letter-spacing: -0.02em;
 color:var(--text);
}
.cta-block p{margin:10px 0 0; color: var(--muted2); font-weight: 650; font-size: 15px;}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap;}

.btn{
 display:inline-flex; align-items:center; justify-content:center;
 gap:10px;
 padding: 12px 16px;
 border-radius: 14px;
 border: 1px solid rgba(255,255,255,0.55);
 background: rgba(255,255,255,0.70);
 box-shadow: 0 10px 26px rgba(2, 6, 23, 0.10);
 cursor:pointer;
 transition: .2s ease;
 font-weight: 800;
 font-size: 14px;
 white-space: nowrap;
 text-decoration:none;
 color:var(--text);
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{
 background: linear-gradient(180deg, var(--blue), var(--blue2));
 color:white;
 border-color: rgba(255,255,255,0.15);
 box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
}

@media(max-width: 768px){
 .team-grid{
  grid-template-columns: 1fr;
  gap: 20px;
 }
 .person{
  padding: 28px 20px;
 }
 .avatar{
  width: 140px;
  height: 140px;
 }
 .person h3{
  font-size: 20px;
 }
 .cta-block{
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
 }
 .cta-actions{
  width: 100%;
 }
 .cta-actions .btn{
  flex: 1;
  min-width: 0;
 }
 .page-content .container{width: 94vw;}
 section{padding: 40px 0;}
 .page-content h1{font-size: 32px;}
 .lead{font-size: 15px;}
 .page-content h2{font-size: 24px;}
 .person-bio{font-size: 14px;}
}

/* Адаптивность */
@media(max-width:1000px){
 .cards{grid-template-columns:1fr 1fr; gap:16px}
 h1{font-size:44px}
 nav{display:none;}
 .burger{display:flex}
 .header-inner{
  grid-template-columns: auto 1fr auto auto;
  column-gap:16px;
 }
 .card:hover{transform:translateY(-8px) scale(1.01)}
}
@media(min-width:1001px){
 .nav-mobile{display:none!important}
 .burger{display:none!important}
}
@media(max-width:640px){
 .cards{grid-template-columns:1fr; gap:14px}
 h1{font-size:32px}
 h1::after{width:60px}
 .sub{font-size:16px}
 .hero-inner{padding:60px 16px 30px}
 .hero-buttons{
  flex-direction:column;
  gap:12px;
 }
 .hero-btn{width:100%;max-width:280px}
 .header-btn{
  padding:10px;
  min-width:44px;
  justify-content:center;
 }
 .header-btn-icon{display:block}
 .header-btn-text{display:none}
 .brand img{height:38px}
 header{height:60px}
 .nav-mobile{top:60px}
 .hero{padding-top:60px}
 .card{flex-direction:column; text-align:center; padding:20px}
 .thumb{width:100%; height:180px; margin-bottom:12px}
 .card:hover{transform:translateY(-6px)}
}