/* ==================================================================================================
   File: style.css
   Description: Main stylesheet for the LoTeK Zone Phantom CMS theme.
   Author: LoTeK (Stephan Kühn)
   Mail: info@lotek-zone.com
   Web: https://lotek-zone.com/
   GitHub: https://github.com/LoTeK-Zone
   Repository: https://github.com/LoTeK-Zone/phantom-cms
   Version: 0.1.2
   Last Updated: 2026-05-26
   License: MIT
   ================================================================================================== */

:root {
   --ltz-bg: #03070c;
   --ltz-panel: rgba(7, 15, 23, 0.88);
   --ltz-panel-soft: rgba(9, 22, 34, 0.72);
   --ltz-line: rgba(108, 188, 255, 0.22);
   --ltz-line-soft: rgba(255, 255, 255, 0.08);
   --ltz-blue: #44a8ff;
   --ltz-blue-soft: #8ed0ff;
   --ltz-text: #e6edf4;
   --ltz-muted: #9aa7b4;
   --ltz-dim: #6e7c89;
   --ltz-green: #63d471;
   --ltz-radius: 8px;
   --ltz-width: 1640px;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   min-height: 100vh;
   background: radial-gradient(circle at 50% 0, rgba(28, 95, 151, 0.3), transparent 36%), var(--ltz-bg);
   color: var(--ltz-text);
   font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   line-height: 1.55;
}

a {
   color: inherit;
   text-decoration: none;
}

img {
   max-width: 100%;
}

.site-main {
   min-height: 60vh;
}

.hero-section {
   position: relative;
   min-height: 500px;
   background-image: url("../img/banner.jpg");
   background-size: cover;
   background-position: center;
   border-bottom: 1px solid var(--ltz-line);
   overflow: hidden;
}

.hero-section__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(3, 7, 12, 0.96) 0%, rgba(3, 7, 12, 0.72) 31%, rgba(3, 7, 12, 0.16) 67%, rgba(3, 7, 12, 0.86) 100%);
}

.hero-section__content {
   position: relative;
   z-index: 1;
   width: min(var(--ltz-width), calc(100% - 48px));
   margin: 0 auto;
   padding: 140px 0 90px;
}

.micro-label {
   margin: 0 0 18px;
   color: var(--ltz-blue-soft);
   text-transform: uppercase;
   letter-spacing: 0.18em;
   font-size: 0.76rem;
}

.hero-section h1 {
   margin: 0 0 20px;
   font-family: "Consolas", "Courier New", monospace;
   font-size: clamp(2.7rem, 5vw, 5.8rem);
   line-height: 0.96;
   letter-spacing: 0.02em;
}

.hero-section p {
   max-width: 600px;
   margin: 0 0 28px;
   color: #d0d8df;
   font-size: clamp(1.05rem, 1.6vw, 1.45rem);
}

.hero-section__actions,
.section-heading-row,
.site-footer__inner,
.site-footer__brand,
.site-footer__links {
   display: flex;
   align-items: center;
}

.hero-section__actions {
   gap: 16px;
   flex-wrap: wrap;
}

.button-primary,
.button-secondary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-height: 44px;
   padding: 0 22px;
   border: 1px solid var(--ltz-line);
   border-radius: 6px;
   font-weight: 650;
   letter-spacing: 0.01em;
}

.button-primary {
   background: linear-gradient(135deg, rgba(32, 124, 255, 0.78), rgba(44, 168, 255, 0.55));
   color: #fff;
   box-shadow: 0 0 28px rgba(50, 155, 255, 0.16);
}

.button-secondary {
   background: rgba(3, 8, 13, 0.64);
   color: var(--ltz-blue-soft);
}

.home-wrap,
.content-wrap {
   width: min(var(--ltz-width), calc(100% - 48px));
   margin: 0 auto;
}

.home-wrap {
   padding: 28px 0 64px;
}

.quick-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 14px;
   margin-top: -72px;
   position: relative;
   z-index: 5;
}

.quick-card,
.project-card,
.dashboard-panel,
.content-panel {
   border: 1px solid var(--ltz-line);
   background: linear-gradient(145deg, rgba(7, 17, 26, 0.94), rgba(4, 9, 14, 0.88));
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 80px rgba(0, 0, 0, 0.28);
}

.quick-card {
   min-height: 128px;
   padding: 22px;
   display: grid;
   grid-template-columns: 42px 1fr;
   gap: 10px 16px;
   align-items: start;
   border-radius: var(--ltz-radius);
}

.quick-card .ltz-symbol {
   grid-row: span 3;
   width: 40px;
   height: 40px;
   color: var(--ltz-blue);
   filter: drop-shadow(0 0 10px rgba(68, 168, 255, 0.45));
}

.quick-card strong {
   font-size: 1rem;
}

.quick-card small,
.project-card p,
.update-list p,
.content-panel p,
.site-footer span {
   color: var(--ltz-muted);
}

.quick-card em {
   color: var(--ltz-blue-soft);
   font-style: normal;
   font-size: 0.82rem;
}


.preview-notice {
   display: grid;
   grid-template-columns: 42px 1fr;
   gap: 16px;
   align-items: start;
   margin-top: 16px;
   padding: 20px 22px;
   border: 1px solid rgba(250, 204, 21, 0.28);
   border-radius: var(--ltz-radius);
   background: linear-gradient(145deg, rgba(25, 20, 8, 0.82), rgba(6, 14, 22, 0.88));
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 70px rgba(0, 0, 0, 0.24);
}

.preview-notice .ltz-symbol {
   width: 38px;
   height: 38px;
   color: #facc15;
   filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.22));
}

.preview-notice strong {
   display: block;
   color: #f5d777;
   font-size: 1rem;
}

.preview-notice p {
   max-width: 980px;
   margin: 5px 0 0;
   color: var(--ltz-muted);
   font-size: 0.94rem;
}

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

.dashboard-panel {
   padding: 24px;
   border-radius: var(--ltz-radius);
}

.section-heading-row {
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 18px;
}

.section-heading-row h2 {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 0;
   font-size: 1.2rem;
}

.section-heading-row a {
   color: var(--ltz-blue-soft);
   font-size: 0.9rem;
}

.project-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
}

.project-card {
   position: relative;
   min-height: 172px;
   padding: 24px 18px 18px;
   border-radius: 7px;
   overflow: hidden;
}

.project-card::after {
   content: "";
   position: absolute;
   inset: auto -20% -30% 20%;
   height: 70%;
   background: radial-gradient(circle, rgba(41, 139, 255, 0.18), transparent 68%);
}

.project-card h3 {
   margin: 0 0 12px;
}

.project-card p {
   margin: 0 0 18px;
   font-size: 0.92rem;
}

.project-card small {
   color: var(--ltz-blue-soft);
}

.project-tag {
   position: absolute;
   top: 14px;
   right: 14px;
   padding: 3px 8px;
   border-radius: 4px;
   background: rgba(68, 168, 255, 0.22);
   color: var(--ltz-blue-soft);
   font-size: 0.72rem;
   font-weight: 700;
}

.update-list {
   margin: 0;
   padding: 0;
   list-style: none;
}

.update-list li {
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 12px;
   align-items: center;
   padding: 11px 0;
   border-top: 1px solid var(--ltz-line-soft);
}

.update-list span {
   padding: 2px 6px;
   border-radius: 3px;
   background: rgba(68, 168, 255, 0.25);
   color: var(--ltz-blue-soft);
   font-size: 0.72rem;
   font-weight: 700;
}

.update-list p {
   margin: 0;
   font-size: 0.9rem;
}

.update-list time {
   color: var(--ltz-dim);
   font-size: 0.78rem;
}

.principle-strip {
   margin: 22px 0 0;
   padding: 20px;
   border-top: 1px solid var(--ltz-line);
   border-bottom: 1px solid var(--ltz-line);
   color: var(--ltz-blue-soft);
   text-align: center;
   font-family: "Consolas", "Courier New", monospace;
   letter-spacing: 0.35em;
}

.content-wrap {
   padding: 46px 0 76px;
}

.content-panel {
   max-width: 980px;
   min-height: 360px;
   margin: 0 auto;
   padding: clamp(28px, 4vw, 54px);
   border-radius: var(--ltz-radius);
}

.content-panel h1 {
   margin-top: 0;
   font-size: clamp(2rem, 4vw, 3.4rem);
}

.content-panel a {
   color: var(--ltz-blue-soft);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.site-footer {
   border-top: 1px solid var(--ltz-line);
   background: rgba(2, 6, 10, 0.92);
}

.site-footer__inner {
   width: min(var(--ltz-width), calc(100% - 48px));
   margin: 0 auto;
   padding: 30px 0;
   justify-content: space-between;
   gap: 24px;
}

.site-footer__brand {
   gap: 16px;
}

.site-footer__brand img {
   width: 96px;
   height: auto;
}

.site-footer__brand div {
   display: grid;
}

.site-footer__links {
   gap: 28px;
   color: var(--ltz-muted);
}

.site-footer__bottom {
   padding: 12px 24px 22px;
   color: var(--ltz-dim);
   text-align: center;
   font-size: 0.84rem;
}

@media (max-width: 1280px) {
   .quick-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: -38px;
   }

   .project-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

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

   .quick-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 640px) {
   .home-wrap,
   .content-wrap,
   .hero-section__content,
   .site-footer__inner {
      width: min(100% - 28px, var(--ltz-width));
   }

   .hero-section {
      min-height: 420px;
   }

   .hero-section__content {
      padding-top: 98px;
   }

   .quick-grid,
   .project-grid {
      grid-template-columns: 1fr;
   }

   .quick-card {
      min-height: auto;
   }

   .site-footer__inner,
   .site-footer__links {
      align-items: flex-start;
      flex-direction: column;
   }

   .principle-strip {
      letter-spacing: 0.14em;
      font-size: 0.8rem;
   }
}