/* HERO */
.hero{background:var(--paper-2);padding:5rem 0 0;overflow:hidden}
.hero-inner{max-width:var(--max);margin:0 auto;padding:0 2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--blue-pale);border:1px solid var(--paper-3);border-radius:999px;padding:5px 14px;font-size:0.72rem;font-weight:500;color:var(--blue);letter-spacing:0.04em;margin-bottom:1.5rem;opacity:0;animation:riseIn 0.5s ease 0.05s forwards}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue)}
.hero h1{font-size:clamp(2.6rem,4vw,4.4rem);margin-bottom:1.5rem;opacity:0;animation:riseIn 0.6s ease 0.15s forwards}
.hero h1 em{font-style:italic;color:var(--blue)}
.hero-sub{font-size:1.05rem;color:var(--ink-2);line-height:1.8;max-width:460px;margin-bottom:2rem;opacity:0;animation:riseIn 0.6s ease 0.25s forwards}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;padding-bottom:4rem;opacity:0;animation:riseIn 0.6s ease 0.35s forwards}

/* Hero right — signing methods visual */
.hero-visual{opacity:0;animation:riseIn 0.7s ease 0.2s forwards;padding-bottom:4rem}
.sign-methods{display:flex;flex-direction:column;gap:1rem}
.sign-method{background:var(--paper);border:1px solid var(--paper-3);border-radius:var(--r-lg);padding:1.5rem;display:flex;align-items:center;gap:1.25rem;transition:all 0.2s}
.sign-method:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(47,74,199,0.08)}
.sign-method-icon{width:48px;height:48px;border-radius:var(--r-lg);background:var(--blue-pale);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.sign-method-title{font-size:0.9rem;font-weight:600;color:var(--heading);margin-bottom:0.2rem}
.sign-method-desc{font-size:0.78rem;color:var(--ink-3);line-height:1.5}
.sign-method-tag{margin-left:auto;font-size:0.65rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--forest-pale);color:var(--forest);white-space:nowrap;flex-shrink:0}

/* VENUES STRIP */
.venues-strip{background:var(--blue);padding:1.25rem 0}
.venues-strip-inner{max-width:var(--max);margin:0 auto;padding:0 2.5rem;display:flex;align-items:center;gap:0}
.venues-label{font-size:0.7rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.5);white-space:nowrap;margin-right:2rem}
.venues-list{display:flex;gap:0;flex-wrap:nowrap;overflow:hidden}
.venue-tag{font-size:0.82rem;color:rgba(255,255,255,0.75);padding:0.3rem 1.25rem;border-left:1px solid rgba(255,255,255,0.15);white-space:nowrap}
.venue-tag:last-child{border-right:1px solid rgba(255,255,255,0.15)}

/* FEATURES */
.features{padding:6rem 0}
.features-header{text-align:center;max-width:680px;margin:0 auto 4rem}
.features-header h2{font-size:clamp(2rem,3vw,2.8rem);margin-bottom:1rem}
.features-header h2 em{font-style:italic;color:var(--blue)}
.features-header p{font-size:1rem;color:var(--ink-2);line-height:1.8}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feature-card{border:1px solid var(--paper-3);border-radius:var(--r-lg);padding:2rem;background:var(--paper-2);transition:all 0.2s}
.feature-card:hover{background:var(--paper);box-shadow:0 8px 28px rgba(47,74,199,0.08);border-color:var(--blue)}
.feature-icon{width:44px;height:44px;border-radius:var(--r);background:var(--blue-pale);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1.25rem}
.feature-card h3{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--heading);margin-bottom:0.6rem}
.feature-card p{font-size:0.85rem;color:var(--ink-2);line-height:1.7}

/* SIGNING MODES */
.modes{background:var(--paper-2);padding:6rem 0}
.modes-header{text-align:center;max-width:640px;margin:0 auto 4rem}
.modes-header h2{font-size:clamp(2rem,3vw,2.8rem);margin-bottom:1rem}
.modes-header h2 em{font-style:italic;color:var(--blue)}
.modes-header p{font-size:1rem;color:var(--ink-2);line-height:1.8}
.modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.mode-card{background:var(--paper);border:1px solid var(--paper-3);border-radius:var(--r-lg);padding:2.5rem 2rem;text-align:center;transition:all 0.2s}
.mode-card:hover{border-color:var(--blue);box-shadow:0 8px 28px rgba(47,74,199,0.08);transform:translateY(-2px)}
.mode-icon{font-size:2.5rem;margin-bottom:1.25rem}
.mode-card h3{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--heading);margin-bottom:0.75rem}
.mode-card p{font-size:0.85rem;color:var(--ink-2);line-height:1.75}
.mode-badge{display:inline-block;margin-top:1.25rem;font-size:0.7rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--blue-pale);color:var(--blue)}

/* VENUES / USE CASES */
.venues{padding:6rem 0}
.venues-header{text-align:center;max-width:640px;margin:0 auto 3.5rem}
.venues-header h2{font-size:clamp(2rem,3vw,2.8rem);margin-bottom:1rem}
.venues-header h2 em{font-style:italic;color:var(--blue)}
.venues-header p{font-size:1rem;color:var(--ink-2);line-height:1.8}
.venue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.venue-card{border:1px solid var(--paper-3);border-radius:var(--r-lg);padding:2rem 1.5rem;background:var(--paper);transition:all 0.2s}
.venue-card:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(47,74,199,0.07);transform:translateY(-2px)}
.venue-card-icon{font-size:1.75rem;margin-bottom:1rem}
.venue-card h3{font-family:var(--serif);font-weight:700;font-size:0.95rem;color:var(--heading);margin-bottom:0.4rem}
.venue-card p{font-size:0.78rem;color:var(--ink-3);line-height:1.6}
.venue-card-examples{margin-top:0.85rem;display:flex;flex-wrap:wrap;gap:5px}
.example-chip{font-size:0.65rem;padding:2px 8px;border-radius:999px;background:var(--blue-pale);color:var(--blue);font-weight:500}

/* HOW IT WORKS */
.how{background:var(--paper-2);padding:6rem 0}
.how-header{text-align:center;max-width:640px;margin:0 auto 4rem}
.how-header h2{font-size:clamp(2rem,3vw,2.8rem);margin-bottom:1rem}
.how-header h2 em{font-style:italic;color:var(--blue)}
.how-header p{font-size:1rem;color:var(--ink-2);line-height:1.8}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--paper-3);border-radius:var(--r-lg);overflow:hidden;margin-bottom:3rem}
.how-step{background:var(--paper);padding:2.5rem 2rem}
.how-step-num{font-family:var(--serif);font-size:2.5rem;font-weight:900;color:var(--blue-pale);line-height:1;margin-bottom:1.25rem}
.how-step-title{font-size:0.9rem;font-weight:600;color:var(--heading);margin-bottom:0.6rem}

/* COMPLIANCE */
.compliance{padding:6rem 0}
.compliance-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.compliance-left h2{font-size:clamp(1.8rem,2.5vw,2.4rem);margin-bottom:1.25rem}
.compliance-left h2 em{font-style:italic;color:var(--blue)}
.compliance-left p{font-size:0.95rem;color:var(--ink-2);line-height:1.8;margin-bottom:1.25rem}
.compliance-cards{display:flex;flex-direction:column;gap:1rem}
.compliance-card{background:var(--paper-2);border:1px solid var(--paper-3);border-radius:var(--r-lg);padding:1.5rem 1.75rem;display:flex;gap:1rem;align-items:flex-start;transition:border-color 0.15s}
.compliance-card:hover{border-color:var(--blue)}
.compliance-card-icon{font-size:1.1rem;flex-shrink:0;margin-top:2px}
.compliance-card-title{font-size:0.88rem;font-weight:600;color:var(--heading);margin-bottom:0.3rem}


/* RESPONSIVE */
@media(max-width:900px){

  .hero-inner{grid-template-columns:1fr;gap:2.5rem}.hero-visual{display:none}
  .problem-layout,.compliance-layout{grid-template-columns:1fr;gap:2.5rem}
  .feature-grid,.modes-grid,.venue-grid{grid-template-columns:1fr 1fr}
  .how-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .feature-grid,.modes-grid,.venue-grid,.how-steps{grid-template-columns:1fr}
}