@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root{
  --border:#4A5568;
  --text:#1A202C;
  --muted:#4A5568;
  --subtle:#718096;
  --bg:#f5f7fa;

  --blue:#4A90E2;
  --green:#50c878;
  --orange:#ff7f50;
  --purple:#9333ea;

  --shadow-blue: rgba(74, 144, 226, 0.12);
  --shadow-green: rgba(80, 200, 120, 0.12);
}

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

html, body{ height:100%; width:100%; }

body{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* wrappers */
.main-wrapper{ width:100%; min-height:100vh; overflow-x:hidden; }
.container{ max-width:1200px; margin:0 auto; padding:80px 50px; }
.content{ position:relative; z-index:1; }

/* background pattern */
.bg-pattern{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.08;
}
.pattern-circle{ position:absolute; border:3px solid var(--orange); border-radius:50%; }
.pattern-circle:nth-child(1){ width:400px; height:400px; top:-100px; right:-50px; border-color:var(--blue); }
.pattern-circle:nth-child(2){ width:250px; height:250px; bottom:100px; left:-80px; border-color:var(--green); }
.pattern-square{ position:absolute; width:150px; height:150px; border:3px solid #ff7f50; transform:rotate(45deg); top:40%; right:5%; }

/* animations */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.animate-slide-in{ animation:fadeInUp .6s ease-out forwards; opacity:0; }
.icon-float{ animation:float 3s ease-in-out infinite; }

/* badges */
.keyword-badge{
  display:inline-block;
  background:#fef3c7;
  color:#78350f;
  padding:5px 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  margin:0 6px 8px 0;
  cursor:default;
  border:1px solid rgba(120,53,15,.18);
  transition:all .25s ease;
}
.keyword-badge:hover{ transform:scale(1.05); box-shadow:0 4px 12px rgba(234,179,8,.25); }
.keyword-badge.blue{ background:#bfdbfe; color:#1e3a8a; border-color:rgba(30,58,138,.18); }
.keyword-badge.green{ background:#bbf7d0; color:#14532d; border-color:rgba(20,83,45,.18); }
.keyword-badge.purple{ background:#e9d5ff; color:#581c87; border-color:rgba(88,28,135,.18); }

/* header */
.header{
  margin-bottom:70px;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:40px;
  align-items:start;
}
.header-icon-box{
  width:120px; height:120px;
  background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:64px;
  border-radius:20px;
  box-shadow:0 8px 24px rgba(255,127,80,.2);
  position:relative;
}
.header-icon-box::after{
  content:"";
  position:absolute;
  width:100%; height:100%;
  border:3px solid var(--blue);
  border-radius:20px;
  top:10px; left:10px;
  z-index:-1;
}
.header-text h1{
  font-size:56px;
  font-weight:800;
  color:var(--text);
  line-height:1.1;
  margin-bottom:14px;
  letter-spacing:-1px;
}
.header-text h1 .accent{ color:var(--orange); position:relative; display:inline-block; }
.header-text h1 .accent::after{
  content:"";
  position:absolute;
  bottom:8px; left:0;
  width:100%; height:12px;
  background:var(--green);
  opacity:.25;
  z-index:-1;
}
.subtitle{ font-size:20px; color:var(--subtle); font-weight:500; }

/* sections */
.section{
  display:grid;
  grid-template-columns:8px 1fr;
  gap:32px;
  margin-bottom:50px;
  animation:fadeInUp .55s ease-out;
}
.section-accent{ background:var(--orange); border-radius:4px; }
.section-content-wrapper{
  background:#fff;
  padding:40px;
  box-shadow:8px 8px 0 var(--shadow-blue);
  border:2px solid var(--border);
}
.section-header{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
}
.section-icon{
  width:44px; height:44px;
  border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  font-size:22px;
}
.section-header h2{
  font-size:32px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.5px;
}
.section-body{
  font-size:17px;
  color:var(--muted);
  line-height:1.85;
}
.section-body p{ margin-bottom:16px; }
.section-body strong{ color:var(--orange); font-weight:700; }

/* search form basic */
.search-form{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.search-form input[type="search"]{
  flex:1;
  border:2px solid var(--border);
  padding:10px 12px;
  font-size:14px;
  outline:none;
}
.search-form input[type="submit"]{
  border:2px solid var(--border);
  background:#EBF8FF;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}

/* responsive */
@media (max-width:900px){
  .container{ padding:50px 30px; }
  .header{ grid-template-columns:1fr; gap:24px; }
  .header-icon-box{ width:100px; height:100px; font-size:52px; }
  .header-text h1{ font-size:40px; }
}