@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [ZZ2 Ecosystem](https://docs.sd1.su)
 * @summary [Variant 08: Bento Grids (Modular Structure)]
 * @created 2025-12
 * @modified 2025-12
 *
 * @file D:/kz/kz-controls/sd1.su/docs.sd1.su/examples/hero-section-premium/style-08.css
 * @link https://docs.sd1.su/examples/hero-section-premium/style-08.css
 *
 * @remarks
 * - Structured, modular "Bento" layout aesthetic
 * - Grid-based background and elements
 * - Rounded corners on distinct blocks
 * - Primary buttons: Accent Block (Both)
 * - Animations: Grid Pan, Icon Pop, Button Scale (No Translate)
 * =============================================================================
 */

/* --- Layout & Background --- */

body
{
  background-color: rgb(17, 17, 17);
  color: rgb(245, 245, 247);
}

.hero-section
{
  background-color: rgb(13, 13, 13);
  /* Bento Grid Background Pattern */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: grid-pan 60s linear infinite;
}

@keyframes grid-pan
{
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* Vignette for focus */
.hero-section::after
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 30%, rgb(13, 13, 13) 100%);
  pointer-events: none;
}

/* --- Content Styling --- */

.hero-content
{
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  /* Main Bento Card Look */
  background: rgb(28, 28, 30);
  border-radius: 32px;
  padding: 5rem 3rem;
  border: 1px solid rgb(44, 44, 46);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.hero-icon
{
  margin-bottom: 2.5rem;
  display: inline-flex;
  padding: 1.5rem;
  background: rgb(44, 44, 46);
  border-radius: 24px;
  border: 1px solid rgb(58, 58, 60);
  animation: bento-pop 3s ease-in-out infinite alternate;
}

@keyframes bento-pop
{
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(10, 132, 255, 0); }
  100% { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }
}

.hero-icon svg
{
  width: 90px;
  height: 90px;
  color: rgb(10, 132, 255); /* System Blue */
}

.hero-title
{
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin-bottom: 1.5rem;
  font-size: 3.5rem; /* Larger title for impact */
  letter-spacing: -0.01em;
}

.hero-subtitle
{
  color: rgb(142, 142, 147);
  font-size: 1.35rem;
  margin-bottom: 4rem;
  font-weight: 400;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* --- Buttons --- */

.hero-buttons
{
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

.btn-primary
{
  padding: 1.1rem 2.5rem;
  border-radius: 14px; /* Matches bento aesthetic */
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: rgb(10, 132, 255);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(10, 132, 255);
}

.btn-primary:hover
{
  background: rgb(0, 119, 237);
  /* No Translate */
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4);
}