/* =========================================================
   TaskCamp Landing (2025) — rewritten styles.css
   New design: green-blue palette, pain-first approach
   ========================================================= */

/* -------- Base / Reset -------- */
:root{
  --bg-0:#060f18;
  --text:#eaf2ff;
  --text-2:rgba(234,242,255,.78);
  --text-3:rgba(234,242,255,.58);

  --card: rgba(15, 23, 42, 0.65);
  --card-2: rgba(15, 23, 42, 0.75);
  --stroke: rgba(75, 85, 99, 0.6);
  --stroke-2: rgba(75, 85, 99, 0.8);

  --shadow: 0 12px 36px rgba(0,0,0,.5);
  --shadow-soft: 0 8px 20px rgba(0,0,0,.5);

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;

  --accent-1:#22c55e;
  --accent-2:#3b82f6;

  --grad-accent: linear-gradient(135deg, #22c55e, #3b82f6);
  --grad-accent-soft: linear-gradient(135deg, rgba(34,197,94,.18), rgba(59,130,246,.18));

  --container: 1160px;
  --pad-x: 24px;

  --header-h: 72px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }

body{
  margin:0;
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif;
  line-height:1.55;
  background:
    radial-gradient(ellipse 140% 90% at 10% 15%, #152a58 0%, transparent 55%),
    radial-gradient(ellipse 110% 130% at 85% 45%, #0a2540 0%, transparent 60%),
    radial-gradient(ellipse 150% 80% at 50% 90%, #0a1d30 0%, transparent 50%),
    radial-gradient(ellipse 95% 115% at 25% 60%, #171f35 0%, transparent 45%),
    var(--bg-0);
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }

.container{
  max-width: var(--container);
  margin:0 auto;
  padding:0 var(--pad-x);
}

section[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* -------- Typography -------- */
h1,h2,h3{ margin:0; letter-spacing:-0.02em; }
p{ margin:0; color:var(--text-2); }

.section-title{
  font-size:clamp(26px,4vw,38px);
  font-weight:900;
  line-height:1.25;
  margin-bottom:12px;
  letter-spacing:-.02em;
}

.section-subtitle{
  font-size:16px;
  color:var(--text-2);
  max-width:600px;
  margin:0 auto 40px;
}

.gradient-text{
  background:var(--grad-accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* -------- Common Layout -------- */
section{ padding: 80px 0; }

/* -------- Header -------- */
.header{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;
  background: rgba(6, 15, 24, .82);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.header-content{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* Logo */
.logo{
  font-size:20px;
  font-weight:900;
  color:var(--text);
  text-decoration:none;
  letter-spacing:-.03em;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo img{ height: 32px; width:auto; }
.logo-text{
  display:flex;
}
.logo-task{
  color:#eaf2ff;
}
.logo-camp{
  background:var(--grad-accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap: 18px;
  margin-left: auto;
}
.nav-link{
  color: var(--text-3);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover{
  color: var(--text);
  background: rgba(255,255,255,.05);
}

.header-actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* -------- Buttons -------- */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 22px;
  border:none;
  border-radius:8px;
  background:linear-gradient(135deg, #3b82f6, #2563eb);
  color:rgba(255,255,255,.95);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(59,130,246,.3),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.4),inset 0 1px 0 rgba(255,255,255,.2)}

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 22px;
  border:1px solid var(--stroke-2);
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s,border-color .15s;
  white-space:nowrap;
}
.btn-outline:hover{background:rgba(255,255,255,.06);border-color:var(--text-3)}

.btn-header{ padding: 11px 14px; }

/* -------- Language Switcher -------- */
.lang-switcher{ position: relative; }
.lang-switcher-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  color: var(--text-2);
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.lang-switcher-btn:hover{ background: rgba(255,255,255,.06); border-color: var(--stroke-2); }
.lang-switcher.open .lang-switcher-btn{ background: rgba(255,255,255,.08); border-color: var(--stroke-2); }

.lang-current{ font-weight: 800; font-size: 13px; color: var(--text); }
.lang-arrow{
  opacity:.8;
  transition: transform 0.2s ease;
}
.lang-switcher.open .lang-arrow{ transform: rotate(180deg); }

.lang-dropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 240px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid var(--stroke);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  max-height: 800px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lang-switcher.open .lang-dropdown{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.lang-dropdown::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 60%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.lang-dropdown::-webkit-scrollbar{ width: 6px; }
.lang-dropdown::-webkit-scrollbar-track{ background: transparent; }
.lang-dropdown::-webkit-scrollbar-thumb{ background: rgba(75, 85, 99, 0.5); border-radius: 3px; }
.lang-dropdown::-webkit-scrollbar-thumb:hover{ background: rgba(75, 85, 99, 0.7); }

.lang-option{
  position: relative;
  z-index: 1;
  width:100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor:pointer;
  text-align:left;
  transition: background .15s ease, color .15s ease;
}
.lang-option:hover{ background: rgba(255,255,255,.08); color: var(--text); }
.lang-option.active{
  background: rgba(59, 130, 246, 0.15);
  color: var(--text);
}
.lang-option.active::after{
  content: "";
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3 3 7-7' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.lang-flag{ width: 20px; height: 14px; border-radius: 3px; object-fit: cover; }
.lang-name{ font-size: 13px; font-weight: 600; }

/* ========== HERO ========== */
.hero{
  padding-top:calc(var(--header-h) + 80px);
  padding-bottom:80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:'';
  position:absolute;
  top:-120px;left:50%;
  transform:translateX(-50%);
  width:900px;height:600px;
  background:radial-gradient(ellipse,rgba(34,197,94,.10) 0%,rgba(59,130,246,.06) 40%,transparent 70%);
  pointer-events:none;
}

.hero-content{
  position:relative;
  max-width:760px;
  margin:0 auto;
}

.hero-title{
  font-size:clamp(32px,5.5vw,56px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.03em;
  margin-bottom:20px;
}

.hero-description{
  font-size:clamp(16px,2vw,19px);
  color:var(--text-2);
  max-width:600px;
  margin:0 auto 24px;
  line-height:1.65;
}

.hero-micro{
  font-size:14px;
  color:var(--text-3);
  font-weight:500;
}

/* ========== PAIN POINTS ========== */
.pain-points{text-align:center}

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

.pain-card{
  text-align:left;
  background:rgba(239,68,68,.06);
  border:1px solid rgba(239,68,68,.2);
  border-radius:var(--radius-lg);
  padding:24px;
  position:relative;
  overflow:hidden;
  transition:transform .12s ease;
}
.pain-card:hover{transform:translateY(-2px)}

.pain-icon{font-size:32px;margin-bottom:12px}

.pain-card h3{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0 0 8px 0;
}
.pain-card p{
  font-size:14px;
  color:var(--text-2);
  margin:0;
  line-height:1.6;
}

/* ========== SOLUTIONS ========== */
.solutions{text-align:center}

.solution-group{margin-bottom:48px}
.solution-group:last-child{margin-bottom:0}

.solution-group-header{margin-bottom:20px}

.solution-group-header h3{
  font-size:22px;
  font-weight:800;
  color:var(--text);
  margin:0 0 6px 0;
}
.solution-group-header p{
  font-size:15px;
  color:var(--text-2);
  margin:0;
}

.solution-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.solution-cards-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  max-width:760px;
  margin:0 auto;
}

.solution-cards-2x2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

/* ========== FEATURE CARD ========== */
.feature-card{
  text-align:left;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  position:relative;
  overflow:hidden;
}

.feature-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--grad-accent-soft);
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}

.feature-card:hover{
  transform:translateY(-3px);
  border-color:var(--stroke-2);
  box-shadow:var(--shadow-soft);
}
.feature-card:hover::before{opacity:1}

.feature-icon{
  width:44px;height:44px;
  border-radius:14px;
  background:var(--grad-accent-soft);
  border:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  position:relative;
}
.feature-icon svg{width:22px;height:22px}

.feature-content{position:relative}

.feature-content h3{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0 0 6px 0;
}
.feature-content p{
  font-size:14px;
  color:var(--text-2);
  margin:0;
  line-height:1.6;
}

/* ========== PHILOSOPHY ========== */
.philosophy{text-align:center}

.philosophy-content{
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.philosophy-story{
  color: var(--text-2);
  margin-bottom: 28px;
}

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

.philosophy-item{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  transition:transform .12s ease;
}
.philosophy-item:hover{transform:translateY(-2px)}

.philosophy-item .phi-icon{
  font-size:28px;
  margin-bottom:14px;
}
.philosophy-item h3{
  font-size:16px;
  font-weight:700;
  margin:0 0 8px 0;
}
.philosophy-item p{
  font-size:14px;
  color:var(--text-2);
  margin:0;
  line-height:1.6;
}

/* ========== PRICING ========== */
.pricing{text-align:center}

.pricing-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:32px;
  align-items:start;
}

.pricing-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  padding:32px 24px;
  text-align:left;
  position:relative;
  transition:transform .12s ease;
}
.pricing-card:hover{transform:translateY(-2px)}

.pricing-card.featured{
  border-color:var(--accent-1);
  box-shadow:0 0 40px rgba(34,197,94,.1);
}

.pricing-badge{
  position:absolute;
  top:-12px;left:50%;transform:translateX(-50%);
  background:var(--grad-accent);
  color:#060f18;
  font-size:12px;font-weight:700;
  padding:4px 14px;
  border-radius:100px;
  white-space:nowrap;
}

.pricing-card h3{
  font-size:20px;
  font-weight:800;
  margin:0 0 4px 0;
}

.pricing-card .pricing-desc{
  font-size:13px;
  color:var(--text-3);
  margin-bottom:16px;
}

.pricing-price{
  font-size:36px;
  font-weight:900;
  color:var(--text);
  margin-bottom:4px;
  letter-spacing:-.02em;
}
.pricing-price span{
  font-size:15px;
  font-weight:500;
  color:var(--text-3);
}

.pricing-period{
  font-size:13px;
  color:var(--text-3);
  margin-bottom:20px;
}

.pricing-features{
  list-style:none;
  padding:0;margin:0 0 24px 0;
  display:flex;flex-direction:column;gap:10px;
}

.pricing-features li{
  font-size:14px;
  color:var(--text-2);
  display:flex;align-items:flex-start;gap:8px;
  line-height:1.5;
}

.pricing-features li::before{
  content:'\2713';
  color:var(--accent-1);
  font-weight:700;
  flex-shrink:0;
  margin-top:1px;
}

.pricing-btn{
  display:block;
  width:100%;
  text-align:center;
  height:44px;
  line-height:44px;
  border-radius:8px;
  font-size:14px;font-weight:700;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,opacity .15s;
  cursor:pointer;
  border:none;
}
.pricing-btn:hover{transform:translateY(-1px)}

.pricing-btn-primary{
  background:linear-gradient(135deg, #3b82f6, #2563eb);
  color:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(59,130,246,.3),inset 0 1px 0 rgba(255,255,255,.2);
}

.pricing-btn-outline{
  background:transparent;
  border:1px solid var(--stroke-2);
  color:var(--text);
}

.pricing-ai-info{
  margin-top:20px;
  padding:14px 18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  font-size:13px;
  color:var(--text-2);
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


/* ========== FAQ ========== */
.faq{text-align:center}

.faq-list{
  max-width:760px;
  margin:32px auto 0;
  display:flex;flex-direction:column;
  gap:8px;
}

.faq-item{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-md);
  overflow:hidden;
}

.faq-question{
  width:100%;
  background:none;border:none;
  padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;
  color:var(--text);
  font-size:15px;font-weight:600;
  text-align:left;
  font-family:inherit;
  transition:background .15s;
}
.faq-question:hover{background:rgba(255,255,255,.03)}

.faq-chevron{
  width:20px;height:20px;
  flex-shrink:0;
  transition:transform .2s ease;
  color:var(--text-3);
}

.faq-item.open .faq-chevron{transform:rotate(180deg)}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}

.faq-answer-inner{
  padding:0 24px 18px;
  font-size:14px;
  color:var(--text-2);
  line-height:1.65;
  text-align:left;
}

/* ========== CTA ========== */
.cta-section{
  text-align:center;
  padding:80px 0;
}

.cta-box{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  padding:56px 40px;
  position:relative;
  overflow:hidden;
}

.cta-box::before{
  content:'';
  position:absolute;
  top:-80px;left:50%;transform:translateX(-50%);
  width:600px;height:400px;
  background:radial-gradient(ellipse,rgba(34,197,94,.08) 0%,rgba(59,130,246,.05) 40%,transparent 70%);
  pointer-events:none;
}

.cta-box h2{
  font-size:clamp(24px,3.5vw,34px);
  font-weight:900;
  margin-bottom:12px;
  position:relative;
  letter-spacing:-.02em;
}

.cta-box p{
  font-size:16px;
  color:var(--text-2);
  margin-bottom:28px;
  position:relative;
}

.cta-buttons{
  display:flex;align-items:center;justify-content:center;
  gap:12px;
  position:relative;
}

/* ========== FOOTER ========== */
.site-footer{
  border-top:1px solid var(--stroke);
  padding:40px 0;
}

.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}

.footer-copy{
  font-size:13px;
  color:var(--text-3);
}

.footer-links{
  display:flex;gap:20px;
}
.footer-links a{
  font-size:13px;
  color:var(--text-3);
  text-decoration:none;
  transition:color .15s;
}
.footer-links a:hover{color:var(--text)}

/* ========== RESPONSIVE ========== */
@media(max-width:980px){
  .nav{display:none}
  .pain-grid{grid-template-columns:1fr}
  .solution-cards{grid-template-columns:1fr}
  .solution-cards-2{grid-template-columns:1fr}
  .solution-cards-2x2{grid-template-columns:1fr}
  .philosophy-grid{grid-template-columns:1fr}
  .pricing-cards{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  section{padding:56px 0}
  .hero{padding-top:calc(var(--header-h) + 48px);padding-bottom:56px}
}

@media(max-width:600px){
  :root{--pad-x:16px}
  .hero-title{font-size:28px}
  .cta-buttons{flex-direction:column;width:100%}
  .cta-buttons .btn-primary,
  .cta-buttons .btn-outline{width:100%}
  .btn-primary{ width: 100%; }
  .header-actions{ gap: 10px; }
  .lang-dropdown{ width: 220px; }
}

/* -------- Closed Subscription Banners (Mobile) -------- */
.closed-subscription-hero-banner {
  box-sizing: border-box;
  max-width: 100%;
}

.closed-subscription-hero-banner form {
  max-width: 100%;
}

.closed-subscription-pricing-banner {
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 520px) {
  .closed-subscription-hero-banner {
    padding: 16px !important;
    margin-left: -4px;
    margin-right: -4px;
  }

  .closed-subscription-hero-banner form {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .closed-subscription-hero-banner input,
  .closed-subscription-hero-banner button {
    width: 100% !important;
  }

  .closed-subscription-pricing-banner {
    padding: 24px 16px !important;
  }
}