:root{
  --bg:#0f1117; --text:#f1f5f9; --muted:#a8b3c1; --panel:#151823; --chip:#1b2030;
  --accent:#34d399; --accent-2:#22d3ee; --line:#262b3a; --ring:rgba(52,211,153,.25);
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#f6fbff; --text:#101317; --muted:#6b7280; --panel:#ffffff; --chip:#f3f6fb;
  --accent:#10b981; --accent-2:#34d399; --line:#e8ecf3; --ring:rgba(16,185,129,.18);
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg); color:var(--text); line-height:1.55;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Dark theme background */
body {
  background: linear-gradient(180deg, #0a0e1a 0%, #0f1117 60%, #13151f 100%);
  background-attachment: fixed;
}

/* Light theme background */
:root[data-theme="light"] body {
  background: linear-gradient(180deg, #f7fff7 0%, #eaffea 60%, #ffffff 100%);
  background-attachment: fixed;
}

.container{max-width:760px; margin:0 auto; padding:18px 14px 100px}

/* Profile card */
.profile-card {
  background:var(--panel); border:1px solid var(--line); border-radius:22px;
  padding:20px; box-shadow:0 18px 40px -24px var(--ring); margin-bottom:18px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.profile-photo {
  width:170px; height:170px; border-radius:50%;
  object-fit:cover; border:3px solid var(--line);
}
.profile-info { flex:1; min-width:200px; }
.profile-info h1 { margin:0 0 6px; font-size:24px; }
.profile-info .subtitle { margin:0; color:var(--muted); font-size:14px; }
.profile-info .badge {
  display:inline-block; font-size:12px; padding:6px 10px;
  background:var(--chip); border:1px solid var(--line);
  border-radius:999px; color:var(--muted); margin-top:8px;
}

/* Main sections block */
.main-block {
  background:var(--panel); border:1px solid var(--line); border-radius:22px;
  padding:18px; box-shadow:0 18px 40px -24px var(--ring);
}

/* Section */
.section { padding:16px 0; border-bottom:1px solid var(--line); }
.section:last-child { border-bottom:none; }
.section h2 {
  margin:0 0 12px; font-size:17px; position:relative; width:max-content;
  max-width:100%; word-wrap:break-word; line-height:1.3;
}
.section h2::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.section-desc { color:var(--muted); font-size:13px; margin:8px 0 0; line-height:1.5; }

/* Price grid */
.price-wrap{display:grid; grid-template-columns:1fr; gap:20px}
.tier{
  background:var(--chip); border:1px solid var(--line); border-radius:16px; padding:14px;
}
.tier h3{margin:0 0 4px; font-size:16px}
.tier .note{color:var(--muted); font-size:13px; margin:2px 0 0}
.price-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px}
.price-box{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px;
  text-align:center;
}
.price{font-weight:800; font-size:18px}
.label{font-size:12px; color:var(--muted); margin-top:2px}

/* Lists */
.list{list-style:none; padding:0; margin:10px 0 0}
.item{
  background:var(--chip); border:1px solid var(--line); border-radius:14px;
  padding:12px; margin:8px 0; display:flex; align-items:center;
  justify-content:space-between; gap:8px;
}
.item a{
  color:var(--text); text-decoration:none; font-weight:600;
  word-break:break-word; flex:1;
}
.item a:hover{text-decoration:underline}
.arrow{opacity:.55; flex-shrink:0;}

.footer{color:var(--muted); text-align:center; font-size:12px; margin:20px 0 0; padding-top:16px}

/* Bottom controls */
.controls{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  background: color-mix(in oklab, var(--panel) 85%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 14px;
}
.control-btn {
  display:flex; align-items:center; gap:8px; padding:10px 16px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  color:var(--text); box-shadow:0 12px 30px -16px var(--ring);
  cursor:pointer; font:600 13px Inter,system-ui; min-width:90px;
  justify-content:center;
}
.control-btn:hover { transform:translateY(-1px); transition:0.2s ease; }

/* Desktop split */
@media (min-width:520px){
  .price-wrap{grid-template-columns:1fr 1fr}
}

/* Mobile fixes */
@media (max-width:600px){
  .section h2 { font-size:16px; }
  .price-row{ grid-template-columns:1fr; gap:8px; }
  .price-box { padding:10px; }
}

/* =========================
   Floating CTA button
========================= */
#ctaFloat{
  position:fixed; right:16px; bottom:76px; z-index:30;
  display:flex; align-items:center; justify-content:center;
  gap:10px;

  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);

  color:#fff;
  text-decoration:none;
  font:800 13px Inter,system-ui;

  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:
    0 18px 40px -18px var(--ring),
    0 0 0 0 rgba(34,211,238,.0);

  transform:translateZ(0);
  animation: ctaFloat 3.2s ease-in-out infinite;
  overflow:hidden;
}

#ctaFloat .ctaIcon{
  width:34px; height:34px;
  border-radius:999px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  flex:0 0 auto;
  font-size:16px;
}

#ctaFloat #ctaText{
  letter-spacing:.3px;
  white-space:nowrap;
}

#ctaFloat::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:60%;
  height:180%;
  transform:rotate(22deg) translateX(-120%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.28),
    rgba(255,255,255,0)
  );
  animation: ctaShine 2.8s ease-in-out infinite;
  pointer-events:none;
}

#ctaFloat::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:2px solid rgba(52,211,153,.0);
  animation: ctaRing 3.2s ease-in-out infinite;
  pointer-events:none;
}

#ctaFloat:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:
    0 24px 60px -22px var(--ring),
    0 0 0 10px rgba(34,211,238,.08);
  transition: .22s ease;
}
#ctaFloat:active{
  transform:translateY(-1px) scale(.99);
  transition: .08s ease;
}

@keyframes ctaFloat{
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
@keyframes ctaRing{
  0%,100% { border-color: rgba(34,211,238,0); transform:scale(1); opacity:.0; }
  40% { border-color: rgba(34,211,238,.22); transform:scale(1.02); opacity:1; }
  70% { border-color: rgba(52,211,153,.18); transform:scale(1.05); opacity:0; }
}
@keyframes ctaShine{
  0%,55% { transform:rotate(22deg) translateX(-120%); opacity:0; }
  60% { opacity:1; }
  100% { transform:rotate(22deg) translateX(260%); opacity:0; }
}

@media (max-width:520px){
  #ctaFloat{
    right:12px; bottom:74px;
    padding:12px 14px;
    font-size:12px;
  }
  #ctaFloat .ctaIcon{ width:32px; height:32px; }

  /* Floating CTA button */
#ctaFloat{
  position:fixed; right:16px; bottom:76px; z-index:30;
  display:flex; align-items:center; justify-content:center;
  gap:10px;

  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);

  color:#fff;
  text-decoration:none;
  font:800 13px Inter,system-ui;

  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:
    0 18px 40px -18px var(--ring),
    0 0 0 0 rgba(34,211,238,.0);

  transform:translateZ(0);
  animation: ctaFloat 3.2s ease-in-out infinite;
  overflow:hidden;
}

/* Icon bubble */
#ctaFloat .ctaIcon{
  width:34px; height:34px;
  border-radius:999px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  flex:0 0 auto;
  font-size:16px;
}

/* Button text */
#ctaFloat #ctaText{
  letter-spacing:.3px;
  white-space:nowrap;
}

/* Shine */
#ctaFloat::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:60%;
  height:180%;
  transform:rotate(22deg) translateX(-120%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.28),
    rgba(255,255,255,0)
  );
  animation: ctaShine 2.8s ease-in-out infinite;
  pointer-events:none;
}

/* Pulse ring */
#ctaFloat::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:2px solid rgba(52,211,153,.0);
  animation: ctaRing 3.2s ease-in-out infinite;
  pointer-events:none;
}

/* Hover */
#ctaFloat:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:
    0 24px 60px -22px var(--ring),
    0 0 0 10px rgba(34,211,238,.08);
  transition: .22s ease;
}
#ctaFloat:active{
  transform:translateY(-1px) scale(.99);
  transition: .08s ease;
}

/* Animations */
@keyframes ctaFloat{
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
@keyframes ctaRing{
  0%,100% { border-color: rgba(34,211,238,0); transform:scale(1); opacity:0; }
  40% { border-color: rgba(34,211,238,.22); transform:scale(1.02); opacity:1; }
  70% { border-color: rgba(52,211,153,.18); transform:scale(1.05); opacity:0; }
}
@keyframes ctaShine{
  0%,55% { transform:rotate(22deg) translateX(-120%); opacity:0; }
  60% { opacity:1; }
  100% { transform:rotate(22deg) translateX(260%); opacity:0; }
}

/* Mobile */
@media (max-width:520px){
  #ctaFloat{
    right:12px; bottom:74px;
    padding:12px 14px;
    font-size:12px;
  }
  #ctaFloat .ctaIcon{ width:32px; height:32px; }
}

/* Request form */
.request-form{
  display:grid;
  gap:12px;
}

.request-form input,
.request-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--chip);
  color:var(--text);
  font:600 14px Inter,system-ui;
  outline:none;
}

.request-form input:focus,
.request-form textarea:focus{
  box-shadow:0 0 0 6px var(--ring);
  border-color: color-mix(in oklab, var(--accent) 60%, var(--line));
}

.request-btn{
  margin-top:6px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  color:#fff;
  font:800 14px Inter,system-ui;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 18px 40px -18px var(--ring);
}

.request-btn:hover{ transform:translateY(-1px); transition:.2s ease; }
.request-btn:active{ transform:translateY(0px); transition:.05s ease; }


}