/* =======================================================
   Usetrekno.icu — site stylesheet
   Class prefix: usetrekno-icu
   Palette:
     - Headings / accents: #a5d6a7
     - Text: #cecece
     - Buttons: #a5d6a7
     - Button text: #101625
     - Button hover: #cecece
     - Background: #101625
   Font: Poppins (via Google)
   ======================================================= */

/* Variables */
:root{
  --site-bg: #101625;
  --accent: #a5d6a7;
  --text: #cecece;
  --btn-text: #101625;
  --btn-hover: #cecece;
  --muted: rgba(165,214,167,0.06);
}

/* ---------------------------------------------------
   Global Headings (h1–h6)
--------------------------------------------------- */
.usetrekno-icu-section-title,
.usetrekno-icu-popup-title,
.usetrekno-icu-about h2,
.usetrekno-icu-reviews h2,
.usetrekno-icu-contact h2,
.usetrekno-icu-legal h2,
.usetrekno-icu-legal h3,
h1, h2, h3, h4, h5, h6 {
  color: var(--accent); /* #a5d6a7 */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-shadow: 0 0 8px rgba(165,214,167,0.35),
               0 0 12px rgba(165,214,167,0.2);
  border-bottom: 2px solid rgba(165,214,167,0.4);
  display: inline-block;
  padding-bottom: .3rem;
}

/* Specific sizing for hierarchy */
h1, .usetrekno-icu-section-title { font-size: 2rem; }
h2, .usetrekno-icu-popup-title { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; font-weight: 600; }



/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body.usetrekno-icu{
  margin:0;
  padding:0;
  background:var(--site-bg);
  color:var(--text);
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Links */
a{color:var(--accent); text-decoration:none; transition:color .18s ease}
a:hover{color:var(--btn-hover)}

/* Container helper */
.container{max-width:1140px;margin:0 auto;padding:0 1rem}

/* Navbar */
.usetrekno-icu-navbar{
  background:transparent;
  padding:18px 0 10px;
  position:relative;
  z-index:120;
}
.usetrekno-icu-navbar .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  position:relative;
}
.usetrekno-icu-logo{
  max-height:78px;
  width:auto;
  display:block;
  margin:12px auto 6px;
}
.usetrekno-icu-navbar .navbar-toggler{
  position:absolute;
  right:1rem;
  top:1rem;
  border:none;
  color:var(--accent);
  background:transparent;
  font-size:1.2rem;
}
.usetrekno-icu-navbar .navbar-links{text-align:center}
.usetrekno-icu-navbar .navbar-nav{
  display:flex;
  justify-content:center;
  gap:1.15rem;
  padding-left:0;margin:0;flex-wrap:wrap;
}
.usetrekno-icu-navbar .nav-link{
  color:var(--text);
  font-weight:600;
  font-size:.98rem;
  padding:.25rem .6rem;
  border-radius:8px;
}
.usetrekno-icu-navbar .nav-link.active,
.usetrekno-icu-navbar .nav-link:hover{
  color:var(--accent);
  text-shadow:0 0 6px rgba(165,214,167,0.24);
}

/* Hero - 90vh */
.usetrekno-icu-hero{
  height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:24px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(16,22,37,0.3), rgba(16,22,37,0.3));
  background-image:url('../images/hero.jpg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.usetrekno-icu-hero::before{
  content:""; position:absolute; inset:0; background:rgba(16,22,37,0.4); z-index:1;
}
.usetrekno-icu-hero-content{position:relative; z-index:2; max-width:980px; margin:0 auto}
.usetrekno-icu-hero-heading{
  color:var(--accent);
  font-size:clamp(1.8rem,3.6vw,3.2rem);
  font-weight:700;
  margin-bottom:.6rem;
  text-shadow:0 0 10px rgba(165,214,167,0.18);
}
.usetrekno-icu-hero-text{
  color:var(--text);
  font-size:clamp(1rem,1.6vw,1.15rem);
  max-width:760px; margin:0 auto 1rem;
}

/* Buttons */
.usetrekno-icu-btn{
  background:var(--accent);
  color:var(--btn-text);
  padding:.72rem 1.45rem;
  border-radius:28px;
  border:none;
  font-weight:700;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .12s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
.usetrekno-icu-btn:hover{ background:var(--btn-hover); color:var(--btn-text); transform:translateY(-3px); }
.usetrekno-icu-btn-outline{
  background:transparent;
  color:var(--accent);
  border:2px solid var(--accent);
  padding:.6rem 1.25rem;
  border-radius:28px;
}
.usetrekno-icu-btn-outline:hover{ background:var(--accent); color:var(--btn-text) }

/* Notice Card */
.usetrekno-icu-brief{ padding-top:3.25rem;padding-bottom:3.25rem }
.usetrekno-icu-brief-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  border:1px solid rgba(165,214,167,0.06);
  color:var(--text);
}

/* Section title */
.usetrekno-icu-section-title{
  font-size:1.9rem;
  color:var(--accent);
  font-weight:700;
  text-shadow: 0 0 6px rgba(165,214,167,0.16);
}

/* Games (responsive with aspect 3:2 -> 900x600) */
.usetrekno-icu-games{ padding-top:3.5rem;padding-bottom:3.5rem }
.usetrekno-icu-game-card{ display:flex; justify-content:center; margin-bottom:2rem }
.usetrekno-icu-game-frame{
  width:100%;
  max-width:900px;
  aspect-ratio:3 / 2; /* keeps 900x600 ratio */
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#0f0d14;
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
}
.usetrekno-icu-game-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Features */
.usetrekno-icu-features{ padding:3.25rem 1rem }
.usetrekno-icu-feature-card{
  background: rgba(165,214,167,0.03);
  border-radius:12px;
  padding:1.25rem;
  transition: transform .22s ease, box-shadow .22s ease;
}
.usetrekno-icu-feature-card:hover{ transform:translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,0.35) }
.usetrekno-icu-feature-card h4{ color:var(--accent) }

/* About */
.usetrekno-icu-about{ padding:3.75rem 0 }
.usetrekno-icu-about-text{ font-size:1.05rem; line-height:1.7; color:var(--text); max-width:820px; margin:0 auto 1.5rem; text-align:left }
.usetrekno-icu-about-text strong{ color:var(--accent) }
.usetrekno-icu-about-image-wrapper{ border-radius:12px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; border:1px solid rgba(165,214,167,0.04) }
.usetrekno-icu-about-image-wrapper:hover{ transform:scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.36) }
.usetrekno-icu-about-img{ width:100%; display:block }

/* ============================
   Reviews Section
============================ */
.usetrekno-icu-reviews {
  background: #101625; /* site background */
  color: #cecece;      /* text color */
}

.usetrekno-icu-reviews .usetrekno-icu-section-title {
  color: #a5d6a7; /* headings color */
  font-weight: 700;
}

.usetrekno-icu-reviews .usetrekno-icu-lead {
  color: #cecece;
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0 auto;
}

/* Review Card */
.usetrekno-icu-review-card-alt {
  background: #1b2233;
  color: #cecece;
  border: 1px solid rgba(165, 214, 167, 0.25);
  border-radius: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.usetrekno-icu-review-card-alt:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

/* Avatar */
.usetrekno-icu-avatar {
  width: 50px;
  height: 50px;
  background: #a5d6a7;
  color: #101625;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Name + role text */
.usetrekno-icu-review-card-alt h6 {
  color: #a5d6a7;
  font-weight: 600;
  margin: 0;
}

.usetrekno-icu-review-card-alt small {
  display: block;
  font-size: 0.85rem;
  color: #aaa;
}

/* Review text */
.usetrekno-icu-review-card-alt p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  color: #cecece;
}


/* Footer */
.usetrekno-icu-footer{ background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); color:var(--text); padding:3rem 1rem }
.usetrekno-icu-footer-logo{ max-width:150px; height:auto; margin:0 auto 1rem; display:block; filter: drop-shadow(0 0 8px rgba(165,214,167,0.16)) }
.usetrekno-icu-footer-links{ gap:1rem; padding-left:0; margin-bottom:1rem }
.usetrekno-icu-footer-link{ color:var(--accent) }
.usetrekno-icu-footer-heading{ color:var(--accent) }
.usetrekno-icu-footer-text{ color:var(--text) }

/* Popup - Age gate */
.usetrekno-icu-popup-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(16,22,37,5); z-index:9999;
}
.usetrekno-icu-popup-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  padding:1.9rem; border-radius:12px; max-width:560px; text-align:center; color:var(--text);
  border:1px solid rgba(165,214,167,0.7);
}
.usetrekno-icu-popup-title{ color:var(--accent); font-size:1.4rem; margin-bottom:.6rem }
.usetrekno-icu-popup-text{ font-size:1rem; line-height:1.6 }

/* Popup actions */
.usetrekno-icu-popup-actions .usetrekno-icu-btn{ margin-right:.5rem }
.usetrekno-icu-popup-actions .usetrekno-icu-btn-outline{ margin-left:.5rem }
/* Popup title (standout heading) */
.usetrekno-icu-popup-title {
  color: var(--accent); /* #a5d6a7 */
  font-size: 1.8rem; /* bigger */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-shadow: 0 0 8px rgba(165,214,167,0.4), 0 0 12px rgba(165,214,167,0.2);
  border-bottom: 2px solid rgba(165,214,167,0.4);
  display: inline-block;
  padding-bottom: .3rem;
}


/* Scroll top (perfect circle) */
.usetrekno-icu-scroll-top{
  position:fixed; right:26px; bottom:26px; width:40px; height:40px; border-radius:50%;
  background:var(--accent); color:var(--btn-text); display:none; align-items:center; justify-content:center;
  font-size:1.05rem; border:none; z-index:999; cursor:pointer; transition:transform .18s ease, background .18s ease;
}
.usetrekno-icu-scroll-top:hover{ background:var(--btn-hover); transform:translateY(-3px) }

/* Legal / long content styles */
.usetrekno-icu-legal{ background:transparent; color:var(--text); padding:3.5rem 1rem; line-height:1.8 }
.usetrekno-icu-legal .container{ max-width:980px; margin:0 auto }
.usetrekno-icu-legal h2{ color:var(--accent); text-shadow:0 0 6px rgba(165,214,167,0.12) }
.usetrekno-icu-legal p{ margin-bottom:1rem; font-size:1.05rem }

/* Forms (if used) */
.usetrekno-icu-contact .form-label{ color:var(--accent); font-weight:600 }
.usetrekno-icu-contact .form-control{ background: rgba(0,0,0,0.06); border:1px solid rgba(165,214,167,0.08); color:var(--text); border-radius:8px; padding:.7rem .9rem }
.usetrekno-icu-contact .form-control:focus{ box-shadow:0 0 12px rgba(165,214,167,0.12); border-color:var(--accent); outline:none }

/* Responsive */
@media (max-width: 992px){
  .usetrekno-icu-logo{ max-height:64px }
  .usetrekno-icu-hero-heading{ font-size:2.1rem }
}
@media (max-width: 768px){
  .usetrekno-icu-hero{ height:75vh; padding:18px }
  .usetrekno-icu-game-frame{ max-width:100%; aspect-ratio:3/2 }
}
@media (max-width:420px){
  .usetrekno-icu-hero{ height:70vh }
  .usetrekno-icu-hero-text{ font-size:.98rem }
  .usetrekno-icu-btn{ padding:.6rem 1rem; font-size:.95rem }
}



/* Contact Section */
.usetrekno-icu-contact {
  background: linear-gradient(180deg, #0e1628, #111b2f);
  color: var(--text);
}

.usetrekno-icu-contact-form,
.usetrekno-icu-contact-info {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(165,214,167,0.08);
}

.usetrekno-icu-contact-form label {
  font-weight: 600;
  color: var(--accent);
}

.usetrekno-icu-contact-form .form-control {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(165,214,167,0.15);
  color: var(--text);
}

.usetrekno-icu-contact-form .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(165,214,167,0.4);
}

.usetrekno-icu-contact-info h4 {
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 1rem;
}

.usetrekno-icu-contact-info ul li {
  font-size: 0.95rem;
  color: #ddd;
}

.usetrekno-icu-contact-info i {
  color: var(--accent);
}




/* Legal Sections */
.usetrekno-icu-legal {
  background: #0e1628;
  color: var(--text);
}

.usetrekno-icu-legal h1 {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.usetrekno-icu-subtitle {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 1.5rem;
  margin-bottom: .8rem;
}

.usetrekno-icu-legal p {
  line-height: 1.7;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #cecece;
}