:root{
  --bg:#f8fafc; --bg-2:#e2e8f0; --panel:#ffffff; --header-footer-bg:#eef2f7; --text:#1e293b; --muted:#64748b; --stroke:rgba(0,0,0,.08);
  --brand-1:#3b82f6; --brand-2:#60a5fa; --accent:#0ea5e9; --radius:18px;
  --shadow:0 24px 60px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.6 "Noto Sans Display",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(60vmax 60vmax at -10% 0%, rgba(59,130,246,.05), transparent 40%),
             radial-gradient(60vmax 60vmax at 110% -10%, rgba(96,165,250,.05), transparent 45%), var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:.1px;}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1180px,100% - 48px); margin-inline:auto}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.1rem; border:1px solid transparent; border-radius:14px; font-weight:700; transition:.2s ease}
.btn-primary{background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); color:#0b0d13; box-shadow:0 10px 26px rgba(123,92,255,.28)}
.btn-primary:hover{transform:translateY(-1px); filter:saturate(1.06)}
.btn-ghost{background:transparent; border-color:var(--stroke)}
.btn-ghost:hover{background:rgba(59,130,246,.06)}
.badge{display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:999px; background:rgba(59,130,246,.18); color:#dbeafe; border:1px solid rgba(59,130,246,.35); font-size:.82rem;}
header.nav{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--stroke); backdrop-filter:saturate(1.12) blur(10px); background: var(--header-footer-bg);}
header .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.7rem}
.logo{
  inline-size:54px; 
  block-size:36px; 
  border-radius:12px; 
  display:grid; 
  place-items:center; 
  background:conic-gradient(from 120deg,var(--brand-1),var(--brand-2),var(--brand-1)); 
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 8px 24px rgba(59,130,246,.25);
  overflow: hidden;
}

.logo svg{
  width:22px;
  height:22px; 
  fill:#ffffff
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-links{display:flex; gap:16px; align-items:center}
.nav-links a{padding:.55rem .7rem; border-radius:10px; opacity:.95}
.nav-links a:hover{background:rgba(59,130,246,.06)}
.burger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--stroke); background:transparent; color:var(--text)}
@media (max-width:900px){.nav-links{display:none}.burger{display:inline-grid; place-items:center}}
.mobile-menu{display:none; position:fixed; inset:64px 16px auto 16px; background:var(--header-footer-bg); border:1px solid var(--stroke); border-radius:16px; box-shadow:var(--shadow); padding:12px}
.mobile-menu a{display:block; padding:12px 10px; border-radius:10px}
.mobile-menu a:hover{background:rgba(59,130,246,.06)}
.hero{padding:58px 0 26px}
.hero-grid{display:grid; grid-template-columns:1.05fr 1.1fr; gap:28px; align-items:center}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.title{font-weight:800; font-size:clamp(34px,6vw,58px); line-height:1.06; margin:10px 0 12px}
.subtitle{font-size:clamp(16px,2.5vw,18px); color:var(--muted)}
.hero-logos{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.hero-logos .logo-box{aspect-ratio:1/1; border-radius:14px; background:linear-gradient(135deg, rgba(59,130,246,.1), rgba(96,165,250,.1)); border:1px solid var(--stroke); box-shadow:var(--shadow); display:grid; place-items:center}
.hero-logos img{width:52%; height:52%; object-fit:contain; filter:grayscale(10%)}
section{padding:40px 0}
h2{font-size:clamp(24px,3.2vw,36px); margin:0 0 16px}
.muted{color:var(--muted)}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr}}
.feature{background:var(--panel); border:1px solid var(--stroke); border-radius:16px; padding:16px; box-shadow: 0 4px 12px rgba(0,0,0,.05);}
.feature .icon{inline-size:42px; block-size:42px; border-radius:12px; display:grid; place-items:center; background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.2); margin-bottom:8px;}
.alt{display:grid; grid-template-columns:1.15fr 1.4fr; gap:20px; align-items:center; background: linear-gradient(135deg, rgba(59,130,246,.05), rgba(14,165,233,.05)); border-radius: 16px; border: 1px solid var(--stroke); margin-top: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.05);}
.text-alt{padding: 10px;}
.btn-alt{display: flex;gap:10px; margin-top:10px}
@media (max-width:768px){.alt{grid-template-columns:1fr; grid-template-rows:auto auto; gap:15px}.alt > div:first-child{order:2; max-width: none;}.alt > div:last-child{order:1}}
.alt .shot{border-radius:16px; border:1px solid var(--stroke); background:linear-gradient(135deg, rgba(59,130,246,.05), rgba(14,165,233,.05)); box-shadow:var(--shadow); min-height:200px; display:flex; align-items:center; justify-content:center; padding:15px; max-width: 500px;}
.alt .shot img{max-width:40%; max-height:100%; height:auto; object-fit:contain; border-radius:12px; width: auto;}
@media(max-width:780px){.alt {display: block;};}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:var(--panel); border:1px solid var(--stroke); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 4px 12px rgba(0,0,0,.05);}
.card .media{height:110px; background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(14,165,233,.16))}
.card .body{padding:14px}
.meta{display:flex; align-items:center; gap:10px}
.meta img{width:42px; height:42px; border-radius:10px; object-fit:cover}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip{font-size:.78rem; padding:.35rem .55rem; border-radius:999px; background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.1); color:#444444}
.cta{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-top:1px solid var(--stroke)}
.problem{display:grid; grid-template-columns:1.1fr .9fr; gap:20px}
@media(max-width:640px){.problem{display: block;}}
.qa{background:var(--panel); border:1px solid var(--stroke); border-radius:14px; overflow:hidden; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.05);}
.qa summary{cursor:pointer; list-style:none; padding:14px 16px; font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa .ans{padding:0 16px 16px; color:var(--muted)}
.notice{background:rgba(59,130,246,.03); border:1px solid var(--stroke); border-radius:16px; padding:16px; text-align: center;}
.partners{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content: center;}
.partners img{width:320px; height:56px; object-fit:contain; border-radius:10px; background:black; border:1px solid var(--stroke); padding:8px}
footer{padding:32px 0 48px; border-top:1px solid var(--stroke); color:#555555; background: var(--header-footer-bg);}
.foot-grid{display:grid; grid-template-columns:1fr; gap:16px}
.footer-logo-container{display:flex; align-items:center; gap:10px}
.footer-content{display:flex; flex-direction:column; gap:20px; margin-top:20px}
.footer-links{display:flex; flex-direction:column; gap:12px; list-style:none; padding:0; margin:0}
.footer-link{color:var(--muted)}
.footer-contact{color:var(--muted)}
.footer-copyright{text-align:center; margin-top:30px; padding-top:20px; border-top:1px solid var(--stroke); color:var(--muted)}

/* Cookie Consent Popup */
.cookie-consent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: var(--header-footer-bg);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cookie-consent.hidden {
  display: none;
}

.cookie-consent p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cookie-accept {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #0b0d13;
}

.cookie-accept:hover {
  transform: translateY(-1px);
  filter: saturate(1.06);
}

.cookie-decline, .cookie-settings {
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--text);
}

.cookie-decline:hover, .cookie-settings:hover {
  background: rgba(0, 0, 0, .06);
}

@media (min-width: 768px) {
  .cookie-consent {
    max-width: 400px;
    bottom: 30px;
    right: 30px;
    left: auto;
  }
  
  .cookie-buttons {
    justify-content: flex-end;
  }
}

/* Age Verification Popup */
.age-verification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(10px);
}

.age-verification.hidden {
  display: none;
}

.age-content {
  background: var(--header-footer-bg);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 30px;
  max-width: 90%;
  width: 500px;
  text-align: center;
  box-shadow: var(--shadow);
}

.age-logo {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
}

.age-logo svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}

.age-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.age-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 15px;
  color: var(--text);
}

.age-description {
  color: var(--muted);
  margin: 0 0 25px;
  line-height: 1.6;
}

.age-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.age-btn {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.age-yes {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #0b0d13;
}

.age-yes:hover {
  transform: translateY(-2px);
  filter: saturate(1.06);
}

.age-no {
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--text);
}

.age-no:hover {
  background: rgba(0, 0, 0, .06);
}

@media (max-width: 600px) {
  .age-content {
    padding: 20px 15px;
  }
  
  .age-title {
    font-size: 1.5rem;
  }
  
  .age-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .age-btn {
    width: 100%;
  }
}