*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg1:#667eea;
  --bg2:#764ba2;
  --ink:#222;
  --muted:#666;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.2);
  --radius:16px;
}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 100%);
  min-height:100vh;
}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:20px}
header{
  background:rgba(255,255,255,.95);
  padding:18px 16px;
  text-align:center;
  border-radius:var(--radius);
  margin-bottom:22px;
  box-shadow:var(--shadow);
}
.logo{max-width:420px;height:auto;margin:0 auto 8px;display:block}
header p{color:var(--muted);font-size:1.05rem}
.page-content{
  background:var(--card);
  padding:28px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.breadcrumbs{font-size:.95rem;color:var(--muted);margin-bottom:10px}
h1{color:var(--bg2);margin-bottom:12px;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.2}
h2{color:var(--bg2);margin-top:20px;margin-bottom:10px;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.25}
h3{color:var(--bg1);margin-top:14px;margin-bottom:6px;font-size:1.1rem}
p{margin-bottom:12px}
ul{margin-left:18px;margin-bottom:14px}
li{margin-bottom:8px}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.hero{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
  align-items:center;
}
.hero-copy{grid-column:1/8}
.hero-media{grid-column:8/-1}

.site-card{
  grid-column:1/-1;
  background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.site-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.site-header{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.rank-badge{
  background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 100%);
  color:#fff;
  width:46px;
  height:46px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  font-weight:800;
  flex:0 0 auto;
}
.site-title h3{margin:0;color:var(--bg2);font-size:1.35rem}
.subtitle{color:var(--muted);font-style:italic;font-size:.95rem}

.site-image{
  width:100%;
  max-width:520px;
  height:auto;
  border-radius:12px;
  margin:12px auto 10px;
  display:block;
  box-shadow:0 5px 14px rgba(0,0,0,.22);
}
.site-bullets{list-style:none;margin:12px 0}
.site-bullets li{padding:6px 0 6px 24px;position:relative;margin:0}
.site-bullets li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--bg1);
  font-weight:800;
}

.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cta-button{
  display:inline-block;
  background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 100%);
  color:#fff;
  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.cta-button:hover{transform:scale(1.03);box-shadow:0 8px 22px rgba(102,126,234,.35)}
.secondary-button{background:#555}
.secondary-button:hover{box-shadow:0 8px 22px rgba(0,0,0,.25)}
.back-button{
  display:inline-block;
  background:#555;
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;
  margin-bottom:14px;
}
.back-button:hover{opacity:.95}

.highlight-box{
  background:#fff3cd;
  border-left:4px solid #ffc107;
  padding:18px;
  margin:16px 0;
  border-radius:10px;
}
.note{
  background:#eef2ff;
  border-left:4px solid var(--bg1);
  padding:14px;
  border-radius:10px;
  color:#1f2a44;
  margin:14px 0;
}

.footer{
  background:rgba(255,255,255,.12);
  color:#fff;
  text-align:center;
  padding:16px;
  margin-top:24px;
  border-radius:12px;
  font-size:.9rem;
  line-height:1.6;
}
.footer a{color:#fff;text-decoration:underline}
.small{font-size:.9rem;color:var(--muted)}
hr{border:0;border-top:1px solid rgba(0,0,0,.08);margin:18px 0}

@media (max-width: 900px){
  .hero-copy{grid-column:1/-1}
  .hero-media{grid-column:1/-1}
}
@media (max-width: 768px){
  .container{padding:14px}
  .page-content{padding:18px}
  .logo{max-width:280px}
  .site-header{flex-direction:column;align-items:flex-start}
  .buttons{flex-direction:column;align-items:stretch}
  .cta-button,.back-button{width:100%;text-align:center}
}