:root{
  --bg0:#070A10;
  --bg1:#0A0F18;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.14);
  --text:#EAF0FF;
  --muted: rgba(234,240,255,.72);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
  /* turshmaza.az vibe: orange + warm highlights */
  --accent1:#F59E0B;
  --accent2:#FFB020;
  --accent3:#22D3EE;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  /* darker, warmer, like the reference */
  background:
    radial-gradient(1100px 760px at 20% 18%, rgba(245,158,11,.18), transparent 58%),
    radial-gradient(900px 680px at 78% 28%, rgba(255,176,32,.14), transparent 60%),
    radial-gradient(820px 640px at 60% 78%, rgba(34,211,238,.06), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.container{width:min(1160px, 92vw); margin:0 auto;}

/* Background ornaments */
.bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.orb{position:absolute; filter: blur(35px); opacity:.55; mix-blend-mode:screen;}
.orb-1{width:520px; height:520px; left:-160px; top:-180px; background:radial-gradient(circle at 30% 30%, rgba(245,158,11,.9), rgba(245,158,11,0) 62%); animation: float1 10s ease-in-out infinite;}
.orb-2{width:560px; height:560px; right:-220px; top:-20px; background:radial-gradient(circle at 40% 40%, rgba(255,176,32,.75), rgba(255,176,32,0) 64%); animation: float2 12s ease-in-out infinite;}
.orb-3{width:520px; height:520px; left:10%; bottom:-240px; background:radial-gradient(circle at 30% 30%, rgba(34,211,238,.18), rgba(34,211,238,0) 64%); animation: float3 14s ease-in-out infinite;}
.grain{position:absolute; inset:-40%; background-image:url('https://cdn.jsdelivr.net/gh/arc6828/grainy-gradient@main/grain.png'); opacity:.08; transform: rotate(6deg);}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,18px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,20px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-22px)}}

.header{padding:56px 0 10px; text-align:center;}
.brand{display:inline-flex; justify-content:center; text-decoration:none; color:inherit; width:100%;}

/* Animated title */
.title{
  position:relative;
  margin:0;
  font-family: "Playfair Display", serif;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: clamp(34px, 5.8vw, 72px);
  line-height:1.02;
}
.title__text{
  position:relative;
  display:inline-block;
  padding: 6px 2px;
  background: linear-gradient(90deg, rgba(234,240,255,.95), rgba(234,240,255,.78));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 24px rgba(124,58,237,.22);
}
.title__glow{
  position:absolute;
  inset:0;
  transform: translateY(0);
  background: linear-gradient(90deg, var(--accent2), var(--accent1), var(--accent3), var(--accent2));
  background-size: 240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter: blur(10px);
  opacity:.55;
  animation: sheen 2.8s linear infinite;
}
.title__text::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.9), rgba(124,58,237,.9), transparent);
  transform: scaleX(.2);
  transform-origin:center;
  opacity:.9;
  animation: underline 2.2s ease-in-out infinite;
}
@keyframes sheen{0%{background-position:0% 50%}100%{background-position:240% 50%}}
@keyframes underline{0%,100%{transform:scaleX(.18); opacity:.55}50%{transform:scaleX(.92); opacity:1}}

.subtitle{margin:12px 0 0; color:var(--muted); font-weight:500;}

.main{padding: 28px 0 56px;}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.card{
  grid-column: auto;
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  cursor:pointer;
  outline:none;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(500px 180px at 15% 0%, rgba(34,211,238,.18), transparent 50%),
              radial-gradient(500px 180px at 85% 0%, rgba(124,58,237,.18), transparent 50%);
  opacity:0;
  transition: opacity .18s ease;
}
.card:hover{transform: translateY(-3px); border-color: rgba(234,240,255,.26);}
.card:hover::before{opacity:1;}
.card:focus-visible{box-shadow: 0 0 0 3px rgba(34,211,238,.28), var(--shadow);}

.card__top{display:flex; align-items:center; gap:14px; position:relative;}
.logo{
  width:52px; height:52px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.35), rgba(124,58,237,.35));
  border: 1px solid rgba(234,240,255,.18);
}
.logo--alt{background: radial-gradient(circle at 30% 30%, rgba(245,158,11,.35), rgba(34,211,238,.26));}
.logo--gold{background: radial-gradient(circle at 30% 30%, rgba(245,158,11,.42), rgba(124,58,237,.22));}
.logo__mark{font-weight:800; letter-spacing:.08em;}

.card__title h2{margin:0; font-size: 18px;}
.muted{color:var(--muted)}
.card__title p{margin:4px 0 0; font-size: 13px;}
.card__go{margin-left:auto; opacity:.8;}

.meta{list-style:none; padding:14px 0 0; margin:0; display:grid; gap:10px; position:relative;}
.meta li{display:flex; gap:10px; align-items:flex-start; color: rgba(234,240,255,.86);}
.meta i{width:18px; margin-top:2px; color: rgba(234,240,255,.72)}
.meta__link{color: rgba(234,240,255,.92); text-decoration:none; border-bottom:1px dashed rgba(234,240,255,.28)}
.meta__link:hover{border-bottom-color: rgba(34,211,238,.7)}

.footer{padding-top: 22px; padding-bottom: 18px; text-align:center;}

@media (max-width: 1024px){
  .cards{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .header{padding-top:44px;}
}

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

@media (prefers-reduced-motion: reduce){
  .orb, .title__glow, .title__text::after{animation:none !important;}
  .card{transition:none;}
}