/* ━━━ LANDING PAGE ━━━ */

.problem{padding:clamp(48px,6vw,88px) var(--px);max-width:1320px;margin:0 auto;box-sizing:border-box}
.problem-lead{font-size:clamp(0.96rem,1.8vw,1.1rem);color:rgba(240,237,232,0.8);line-height:1.8;max-width:620px;margin-bottom:clamp(32px,4.5vw,56px);font-weight:300}
.problem-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.problem-card{
  background:rgba(9,16,10,0.78);border:1px solid rgba(200,240,77,0.1);border-radius:13px;
  padding:clamp(22px,3vw,36px);
  transition:border-color 0.25s,transform 0.3s cubic-bezier(0.22,1,0.36,1);cursor:default;
}
.problem-card:hover{border-color:rgba(200,240,77,0.22)}
.problem-card-tag{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:var(--accent);opacity:0.82;margin-bottom:10px}
.problem-card h3{font-family:'Inter',system-ui,sans-serif !important;font-weight:700 !important;font-size:clamp(1rem,2.2vw,1.35rem) !important;letter-spacing:-0.02em;margin-bottom:10px;color:#fff;padding-bottom:0.02em}
.problem-card p{font-size:clamp(0.84rem,1.4vw,0.92rem);color:rgba(240,237,232,0.68);line-height:1.74;margin-bottom:16px;font-weight:300}
.problem-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.problem-list li{font-size:clamp(0.82rem,1.3vw,0.9rem);color:rgba(240,237,232,0.6);padding-left:16px;position:relative;font-weight:300;line-height:1.5}
.problem-list li::before{content:'—';position:absolute;left:0;color:rgba(200,240,77,0.4);font-size:0.72rem}

.solution{padding:clamp(48px,6vw,88px) var(--px);max-width:1320px;margin:0 auto;box-sizing:border-box}
.solution-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5.5vw,72px);align-items:center}
.solution-images{position:relative;height:clamp(300px,44vw,500px)}
.sol-img-wrap{position:absolute;border-radius:12px;overflow:hidden;box-shadow:0 18px 54px rgba(0,0,0,0.5)}
.sol-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.9) saturate(0.88);transition:filter 0.4s}
.sol-img-wrap:hover img{filter:brightness(0.98) saturate(0.96)}
.sol-img-main{width:72%;height:80%;top:0;left:0;border:1px solid rgba(0,0,0,0.45);z-index:2}
.sol-img-secondary{width:54%;height:55%;bottom:0;right:0;border:1px solid rgba(0,0,0,0.4);z-index:3;box-shadow:0 22px 55px rgba(0,0,0,0.6)}
.solution-text p{font-size:clamp(0.88rem,1.5vw,0.97rem);color:rgba(240,237,232,0.72);line-height:1.8;font-weight:300;margin-bottom:14px}
.solution-text .section-title{margin-bottom:clamp(16px,2.5vw,24px)}
.solution-stats{display:flex;flex-direction:column;gap:16px;margin-top:clamp(20px,3.5vw,36px);padding-top:clamp(18px,3.5vw,30px);border-top:1px solid rgba(200,240,77,0.09)}
.sol-stat{display:flex;flex-direction:column;gap:3px}
.sol-num{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--accent);letter-spacing:-0.01em}
.sol-label{font-size:clamp(0.78rem,1.2vw,0.86rem);color:rgba(240,237,232,0.52);font-weight:300}

/* Process frame */
.process-frame{
  border:1px solid rgba(200,240,77,0.11);border-radius:16px;
  background:rgba(8,13,9,0.72);padding:clamp(20px,3.5vw,44px);overflow:hidden;
}
.process-grid{display:grid;grid-template-columns:1fr;gap:0}
.process-img{
  margin-top:clamp(20px,3.5vw,32px);border-radius:10px;overflow:hidden;
  border:1px solid rgba(0,0,0,0.4);
}
.process-img img{
  width:100%;height:clamp(200px,34vw,360px);
  object-fit:cover;object-position:center 28%;display:block;
  filter:brightness(0.88) saturate(0.86);transition:filter 0.4s;
}
.process-img:hover img{filter:brightness(0.96) saturate(0.94)}
.process .steps-list{max-width:100%}
.process .section-title{margin-bottom:clamp(20px,3.5vw,40px)}

/* CTA split */
.cta-split{padding:clamp(44px,6vw,82px) var(--px);display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1320px;margin:0 auto;box-sizing:border-box}
.cta-card{
  background:rgba(9,16,10,0.82);border:1px solid rgba(200,240,77,0.11);border-radius:14px;
  padding:clamp(24px,3.5vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  transition:border-color 0.25s,transform 0.3s cubic-bezier(0.22,1,0.36,1);cursor:default;
}
.cta-card:hover{border-color:rgba(200,240,77,0.24)}
.cta-card-alt{background:rgba(200,240,77,0.035)}
.cta-card-tag{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:var(--accent);opacity:0.82}
.cta-card h3{font-family:'Inter',system-ui,sans-serif !important;font-weight:700 !important;font-size:clamp(1.05rem,2.2vw,1.4rem) !important;letter-spacing:-0.02em;color:#fff;line-height:1.2;padding-bottom:0.02em}
.cta-card p{font-size:clamp(0.84rem,1.4vw,0.92rem);color:rgba(240,237,232,0.65);line-height:1.68;font-weight:300}
.btn-ghost-green{padding:11px 24px;background:transparent;color:var(--accent);border:1px solid rgba(200,240,77,0.33);border-radius:100px;font-family:'DM Sans',system-ui,sans-serif;font-size:0.88rem;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;transition:all 0.22s;margin-top:2px}
.btn-ghost-green:hover{background:rgba(200,240,77,0.07);border-color:rgba(200,240,77,0.58);transform:translateY(-1px)}

/* Responsive */
@media(max-width:640px){
  .problem-split,.solution-inner,.cta-split{grid-template-columns:1fr;gap:12px}
  .problem-card,.cta-card{padding:18px 15px}
  .solution-images{height:200px;margin-bottom:6px}
  .process-frame{padding:16px 14px}
  .process-img img{height:180px}
}
@media(min-width:1024px){
  .problem-split{gap:20px}
  .solution-inner{grid-template-columns:1fr 1fr;gap:68px}
  .solution-images{height:480px}
  .process-grid{grid-template-columns:1fr 380px;gap:clamp(28px,4.5vw,52px);align-items:start}
  .process-img{margin-top:0;position:sticky;top:calc(68px + 20px)}
  .process-img img{height:clamp(360px,48vw,520px)}
  .cta-split{grid-template-columns:1fr 1fr}
}
@media(min-width:1280px){
  .solution-images{height:540px}
  .process-grid{grid-template-columns:1fr 420px}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PREMIUM 4K LANDING UPGRADES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Sharper section dividers */
.problem, .solution, .cta-split {
  position: relative;
}
.problem::before {
  content: '';
  position: absolute;
  top: 0; left: var(--px); right: var(--px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,240,77,0.1), transparent);
}

/* Problem cards — refined */
.problem-card {
  position: relative;
  overflow: hidden;
}
.problem-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,240,77,0.25), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.problem-card:hover::before { opacity: 1; }

/* Solution section — tighter, more dramatic */
.solution-images {
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6));
}
.sol-img-main {
  box-shadow: -8px 8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,240,77,0.06);
}
.sol-img-secondary {
  box-shadow: 8px -8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,240,77,0.06);
}

/* Stats — premium number treatment */
.stat-num {
  background: linear-gradient(135deg, #e8ff80, #c8f04d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Process frame — elevated glass */
.process-frame {
  background: rgba(10,18,11,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,240,77,0.1);
  box-shadow:
    inset 0 1px 0 rgba(200,240,77,0.08),
    0 24px 64px rgba(0,0,0,0.4);
}

/* Step rows — premium inset */
.step {
  background: rgba(6,10,7,0.5) !important;
  border: 1px solid rgba(200,240,77,0.07) !important;
  position: relative;
  overflow: hidden;
}
.step::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(200,240,77,0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.step:hover::after { opacity: 1; }
.step:hover {
  background: rgba(10,18,11,0.85) !important;
  border-color: rgba(200,240,77,0.18) !important;
}

/* CTA cards — premium glass */
.cta-card {
  background: rgba(8,14,9,0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(200,240,77,0.1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 48px rgba(0,0,0,0.3);
}
.cta-card:hover {
  border-color: rgba(200,240,77,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 20px 56px rgba(0,0,0,0.4),
    0 0 40px rgba(200,240,77,0.06);
}
.cta-card-alt {
  background: linear-gradient(135deg, rgba(200,240,77,0.04) 0%, rgba(10,18,11,0.85) 100%) !important;
}

/* Section headings — gradient text for premium look */
.section-title {
  background: linear-gradient(135deg, #ffffff 60%, rgba(255,255,255,0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* But NOT on section-title inside cta-card (links need solid text) */
.cta-card h3 {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.problem-card h3 {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}

/* Scroll hint line premium style */
.scroll-hint-line {
  background: linear-gradient(to bottom, rgba(200,240,77,0.8), rgba(200,240,77,0));
}