/*
 * PlusLayer - Hosting Landing Page
 * Stylesheet
 * Font: Inter | Modes: Dark (default) + Light
 */

/* ── Google Font ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Dark mode (default) */
  --bg           : #0d1117;
  --bg-card      : #161b22;
  --border       : #30363d;
  --border-soft  : #21262d;
  --accent       : #2f81f7;
  --accent-hover : #388bfd;
  --accent-dim   : rgba(47, 129, 247, .10);
  --accent-ring  : rgba(47, 129, 247, .30);
  --green        : #3fb950;
  --green-bg     : rgba(63, 185, 80, .10);
  --green-border : rgba(63, 185, 80, .25);
  --amber        : #d29922;
  --amber-bg     : rgba(210, 153, 34, .10);
  --amber-border : rgba(210, 153, 34, .25);
  --text-1       : #e6edf3;
  --text-2       : #8b949e;
  --text-3       : #6e7681;
  --text-btn     : #0d1117;
  --shadow-sm    : 0 1px 3px rgba(0, 0, 0, .40);
  --shadow-md    : 0 4px 16px rgba(0, 0, 0, .50);
  --orb-1        : rgba(47, 129, 247, .10);
  --orb-2        : rgba(88, 86, 214, .08);
  --orb-3        : rgba(63, 185, 80, .06);

  /* Shared */
  --ff    : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r-sm  : 6px;
  --r-md  : 12px;
  --r-lg  : 16px;
  --r-xl  : 20px;
  --tr    : .2s ease;
  --max-w : 720px;
}

/* ── Light Mode ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg           : #ffffff;
  --bg-card      : #f6f8fa;
  --border       : #d0d7de;
  --border-soft  : #e8ecef;
  --accent       : #0969da;
  --accent-hover : #0860ca;
  --accent-dim   : rgba(9, 105, 218, .08);
  --accent-ring  : rgba(9, 105, 218, .25);
  --green        : #1a7f37;
  --green-bg     : rgba(26, 127, 55, .08);
  --green-border : rgba(26, 127, 55, .20);
  --amber        : #9a6700;
  --amber-bg     : rgba(154, 103, 0, .08);
  --amber-border : rgba(154, 103, 0, .20);
  --text-1       : #1f2328;
  --text-2       : #57606a;
  --text-3       : #8c959f;
  --text-btn     : #ffffff;
  --shadow-sm    : 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md    : 0 4px 16px rgba(0, 0, 0, .10);
  --orb-1        : rgba(9, 105, 218, .07);
  --orb-2        : rgba(88, 86, 214, .05);
  --orb-3        : rgba(26, 127, 55, .04);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}

html {
  scroll-behavior        : smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family            : var(--ff);
  font-size              : 15px;
  line-height            : 1.6;
  background             : var(--bg);
  color                  : var(--text-1);
  min-height             : 100vh;
  overflow-x             : hidden;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition             : background var(--tr), color var(--tr);
}

/* ── Ambient Orbs ────────────────────────────────────────── */
.bg-orb {
  position      : fixed;
  border-radius : 50%;
  filter        : blur(100px);
  pointer-events: none;
  z-index       : 0;
  will-change   : transform;
  animation     : drift 16s ease-in-out infinite alternate;
}
.orb-1 {
  width     : 560px;
  height    : 560px;
  background: radial-gradient(circle, var(--orb-1) 0%, transparent 70%);
  top       : -180px;
  right     : -140px;
}
.orb-2 {
  width           : 440px;
  height          : 440px;
  background      : radial-gradient(circle, var(--orb-2) 0%, transparent 70%);
  bottom          : 5%;
  left            : -160px;
  animation-delay : -6s;
}
.orb-3 {
  width           : 320px;
  height          : 320px;
  background      : radial-gradient(circle, var(--orb-3) 0%, transparent 70%);
  top             : 45%;
  left            : 50%;
  transform       : translate(-50%, -50%);
  animation-delay : -11s;
}
@keyframes drift {
  from { transform: translate(24px, 32px) scale(1.06); }
  to   { transform: translate(0, 0) scale(1); }
}
/* orb-3 is centered with translate(-50%,-50%), needs its own animation */
.orb-3 { animation-name: drift3; }
@keyframes drift3 {
  from { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  to   { transform: translate(-50%, -50%) translate(20px, 28px) scale(1.06); }
}

/* ── Layout ──────────────────────────────────────────────── */
.page-wrap {
  position  : relative;
  z-index   : 1;
  max-width : var(--max-w);
  margin    : 0 auto;
  padding   : 28px 20px 56px;
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  margin-bottom   : 52px;
}

.logo-link {
  display    : inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-link img {
  height    : 30px;
  width     : auto;
  display   : block;
  transition: opacity var(--tr);
}
.logo-link:hover img { opacity: .8; }

/* Dark mode (default): logo white */
.logo-link img {
  filter: brightness(0) invert(1);
}
/* Light mode: original colors */
[data-theme="light"] .logo-link img {
  filter: none;
}

/* ── Header Right ────────────────────────────────────────── */
.header-right {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.lang-nav { display: flex; gap: 6px; }

.lang-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  padding        : 6px 12px;
  border-radius  : var(--r-sm);
  border         : 1px solid var(--border);
  background     : var(--bg-card);
  color          : var(--text-2);
  font-family    : var(--ff);
  font-size      : 12px;
  font-weight    : 600;
  text-decoration: none;
  letter-spacing : .04em;
  transition     : all var(--tr);
}
.lang-btn:hover,
.lang-btn.active {
  border-color: var(--accent);
  color       : var(--accent);
  background  : var(--accent-dim);
}
.lang-btn img {
  border-radius: 2px;
  display      : block;
  width        : 16px;
  height       : 11px;
}

/* Theme toggle */
.theme-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 34px;
  height         : 34px;
  border-radius  : var(--r-sm);
  border         : 1px solid var(--border);
  background     : var(--bg-card);
  color          : var(--text-2);
  cursor         : pointer;
  flex-shrink    : 0;
  transition     : all var(--tr);
}
.theme-btn:hover {
  border-color: var(--accent);
  color       : var(--accent);
  background  : var(--accent-dim);
}
.theme-btn svg { width: 16px; height: 16px; }

.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: block; }
[data-theme="light"] .icon-moon { display: none; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding   : 0 0 44px;
}

.hero-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 7px;
  padding       : 5px 14px;
  border-radius : 100px;
  border        : 1px solid var(--accent-ring);
  background    : var(--accent-dim);
  color         : var(--accent);
  font-size     : 11px;
  font-weight   : 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom : 16px;
  animation     : fadeUp .5s ease both;
}

.badge-dot {
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : var(--accent);
  flex-shrink  : 0;
  animation    : pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-ring); }
  50%       { box-shadow: 0 0 0 4px transparent; }
}

.domain-display {
  display        : flex;
  align-items    : baseline;
  justify-content: center;
  flex-wrap      : wrap;
  gap            : 0 2px;
  margin-bottom  : 16px;
  animation      : fadeUp .5s .08s ease both;
}
.domain-name {
  font-size     : clamp(1.3rem, 3.5vw, 2rem);
  font-weight   : 800;
  color         : var(--text-1);
  letter-spacing: -.03em;
  line-height   : 1.15;
  word-break    : break-all;
}
.domain-ext {
  font-size     : clamp(.95rem, 2.5vw, 1.4rem);
  font-weight   : 700;
  color         : var(--accent);
  letter-spacing: -.02em;
  line-height   : 1.15;
}

.hero h1 {
  font-size    : clamp(.95rem, 2vw, 1.1rem);
  font-weight  : 500;
  color        : var(--text-2);
  margin-bottom: 8px;
  animation    : fadeUp .5s .16s ease both;
}
.hero-sub {
  font-size: .9rem;
  color    : var(--text-3);
  animation: fadeUp .5s .22s ease both;
}

/* ── Status Card ─────────────────────────────────────────── */
.status-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  padding      : 20px;
  margin-bottom: 16px;
  box-shadow   : var(--shadow-sm);
  animation    : fadeUp .5s .28s ease both;
}
.status-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 10px;
}
.status-item {
  display      : flex;
  align-items  : flex-start;
  gap          : 10px;
  padding      : 12px 14px;
  border-radius: var(--r-md);
  border       : 1px solid transparent;
}
.status-ok   { background: var(--green-bg); border-color: var(--green-border); }
.status-warn { background: var(--amber-bg); border-color: var(--amber-border); }

.status-icon {
  width          : 26px;
  height         : 26px;
  flex-shrink    : 0;
  border-radius  : var(--r-sm);
  display        : flex;
  align-items    : center;
  justify-content: center;
}
.status-ok   .status-icon { background: rgba(63, 185, 80, .15); color: var(--green); }
.status-warn .status-icon { background: rgba(210, 153, 34, .15); color: var(--amber); }
.status-icon svg { width: 13px; height: 13px; }

.status-text          { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.status-text strong   { font-size: 12.5px; font-weight: 600; color: var(--text-1); line-height: 1.3; }
.status-text span     { font-size: 11px; color: var(--text-3); line-height: 1.4; }

/* ── Info Banner ─────────────────────────────────────────── */
.info-section {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-left  : 3px solid var(--accent);
  border-radius: var(--r-md);
  padding      : 16px 20px;
  margin-bottom: 32px;
  animation    : fadeUp .5s .34s ease both;
}
.info-text          { font-size: 13.5px; color: var(--text-2); line-height: 1.7; }
.info-text strong   { color: var(--accent); font-weight: 600; }

/* ── Features ────────────────────────────────────────────── */
.features-section {
  margin-bottom: 32px;
  animation    : fadeUp .5s .40s ease both;
}
.features-section h2 {
  font-size     : 1rem;
  font-weight   : 700;
  color         : var(--text-1);
  margin-bottom : 14px;
  letter-spacing: -.01em;
}
.features-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 10px;
}
.feature-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  padding      : 20px 18px;
  display      : flex;
  flex-direction: column;
  gap          : 6px;
  transition   : border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.feature-card:hover {
  border-color: var(--accent-ring);
  box-shadow  : 0 0 0 3px var(--accent-dim), var(--shadow-sm);
  transform   : translateY(-2px);
}
.feat-icon {
  width          : 32px;
  height         : 32px;
  border-radius  : var(--r-sm);
  background     : var(--accent-dim);
  border         : 1px solid var(--accent-ring);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : var(--accent);
  margin-bottom  : 4px;
  flex-shrink    : 0;
}
.feat-icon svg          { width: 16px; height: 16px; }
.feature-card h3        { font-size: 13px; font-weight: 600; color: var(--text-1); line-height: 1.3; }
.feature-card p         { font-size: 12px; color: var(--text-3); line-height: 1.6; flex: 1; }
.feat-link {
  font-size      : 12px;
  font-weight    : 600;
  color          : var(--accent);
  text-decoration: none;
  transition     : opacity var(--tr);
  display        : inline-flex;
  align-items    : center;
  gap            : 3px;
  margin-top     : 2px;
}
.feat-link:hover { opacity: .7; }

/* ── CTA ─────────────────────────────────────────────────── */
.cta-section {
  margin-bottom: 40px;
  animation    : fadeUp .5s .46s ease both;
}
.cta-inner {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-xl);
  padding      : 36px 32px;
  text-align   : center;
  position     : relative;
  overflow     : hidden;
}
.cta-inner::before {
  content       : '';
  position      : absolute;
  inset         : 0;
  background    : linear-gradient(135deg, var(--accent-dim) 0%, transparent 60%);
  pointer-events: none;
}
.cta-inner h2 {
  font-size     : clamp(1.1rem, 3vw, 1.35rem);
  font-weight   : 800;
  color         : var(--text-1);
  margin-bottom : 10px;
  letter-spacing: -.02em;
  position      : relative;
}
.cta-inner p {
  font-size    : 13.5px;
  color        : var(--text-2);
  max-width    : 440px;
  margin       : 0 auto 24px;
  line-height  : 1.7;
  position     : relative;
}
.cta-actions {
  display        : flex;
  gap            : 10px;
  justify-content: center;
  flex-wrap      : wrap;
  position       : relative;
}
.btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  padding        : 10px 22px;
  border-radius  : var(--r-md);
  font-family    : var(--ff);
  font-size      : 13.5px;
  font-weight    : 600;
  text-decoration: none;
  transition     : all var(--tr);
  white-space    : nowrap;
  border         : 1px solid transparent;
}
.btn-primary {
  background  : var(--accent);
  color       : var(--text-btn);
  border-color: var(--accent);
  box-shadow  : 0 2px 8px var(--accent-ring);
}
.btn-primary:hover {
  background  : var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow  : 0 4px 16px var(--accent-ring);
}
.btn-outline {
  background  : transparent;
  color       : var(--text-1);
  border-color: var(--border);
}
.btn-outline:hover {
  border-color: var(--accent);
  color       : var(--accent);
  background  : var(--accent-dim);
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  animation : fadeUp .5s .52s ease both;
}
.footer-links {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : 4px 18px;
  margin-bottom  : 20px;
}
.footer-links a {
  font-size      : 12.5px;
  font-weight    : 500;
  color          : var(--text-3);
  text-decoration: none;
  transition     : color var(--tr);
}
.footer-links a:hover { color: var(--accent); }

.footer-bottom {
  border-top    : 1px solid var(--border-soft);
  padding-top   : 18px;
  display       : flex;
  flex-direction: column;
  gap           : 4px;
}
.footer-bottom p { font-size: 11.5px; color: var(--text-3); }
.footer-bottom a {
  color          : var(--text-2);
  text-decoration: none;
  font-weight    : 600;
  transition     : color var(--tr);
}
.footer-bottom a:hover { color: var(--accent); }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 580px) {
  .page-wrap              { padding: 20px 16px 48px; }
  .site-header            { margin-bottom: 36px; }
  .logo-link img          { height: 24px; }
  .status-grid            { grid-template-columns: 1fr; gap: 8px; }
  .features-grid          { grid-template-columns: 1fr; }
  .cta-inner              { padding: 28px 20px; }
  .cta-actions            { flex-direction: column; align-items: stretch; }
  .btn                    { justify-content: center; }
  .footer-links           { gap: 4px 12px; }
}

@media (max-width: 380px) {
  .domain-name { font-size: 1.2rem; }
  .domain-ext  { font-size: .9rem; }
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, .bg-orb { animation: none !important; transition: none !important; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .bg-orb, .theme-btn { display: none; }
  body { background: #fff; color: #000; }
}