.frontend-hero{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));position:relative;overflow:hidden}.content-intro{max-width:1000px;margin:0 auto;text-align:center}.content-intro .heading{margin-bottom:2rem}.intro-text{font-size:1.125rem;line-height:1.8;color:var(--text-tertiary);margin-bottom:1.5rem;text-align:left}.intro-text strong{color:var(--accent-blue);font-weight:600}.features-section{background:var(--bg-secondary)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-gap:2rem;gap:2rem;margin-top:3rem}.feature-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1.5rem;padding:2.5rem;transition:all .3s ease}.feature-card:hover{transform:translateY(-5px);border-color:var(--accent-blue);box-shadow:0 10px 30px rgba(59,130,246,.2)}.feature-icon{font-size:3.5rem;margin-bottom:1.5rem}.feature-card h3{font-size:1.5rem;margin-bottom:1rem;color:var(--accent-blue)}.feature-card>p{color:var(--text-tertiary);line-height:1.7;margin-bottom:1.5rem}.feature-list{list-style:none;padding:0;margin:0}.feature-list li{padding:.5rem 0 .5rem 1.75rem;color:var(--text-tertiary);position:relative;line-height:1.6}.feature-list li:before{content:"✓";position:absolute;left:0;color:var(--accent-blue);font-weight:700}.technologies-section{background:var(--bg-primary)}.tech-categories{display:flex;flex-direction:column;gap:3rem;margin-top:3rem}.tech-category{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1.5rem;padding:2.5rem}.tech-category h3{font-size:1.5rem;margin-bottom:1.5rem;color:var(--accent-blue);text-align:center}.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:1.5rem;gap:1.5rem}.tech-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.75rem;padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;transition:all .3s ease}.tech-item:hover{border-color:var(--accent-blue);background:rgba(59,130,246,.1);transform:translateY(-3px)}.tech-icon{font-size:2.5rem}.tech-item span{color:var(--text-primary);font-weight:500;text-align:center}.capabilities-section{background:var(--bg-secondary)}.capabilities-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:2rem;gap:2rem;margin-top:3rem}.capability-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:2rem;transition:all .3s ease}.capability-card:hover{transform:translateY(-5px);border-color:var(--accent-blue);box-shadow:0 10px 30px rgba(59,130,246,.2)}.capability-card h3{font-size:1.25rem;margin-bottom:1rem;color:var(--accent-blue)}.capability-card p{color:var(--text-tertiary);line-height:1.7;margin:0}.portfolio-section{background:var(--bg-primary)}.portfolio-item-large{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1.5rem;padding:3rem;max-width:1000px;margin:0 auto}.portfolio-item-large h3{font-size:2rem;margin-bottom:1.5rem;color:var(--accent-blue)}.portfolio-description{font-size:1.125rem;line-height:1.8;color:var(--text-tertiary);margin-bottom:2.5rem}.project-details{display:flex;flex-direction:column;gap:2.5rem}.detail-section h4{font-size:1.25rem;margin-bottom:1rem;color:var(--text-primary)}.tech-tags{display:flex;flex-wrap:wrap;gap:.75rem}.tag{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.5rem;padding:.5rem 1rem;color:var(--text-primary);font-weight:500;font-size:.9rem;transition:all .3s ease}.tag:hover{background:var(--accent-blue);color:var(--text-white);border-color:var(--accent-blue)}.workflow-section{background:var(--bg-secondary)}.workflow-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:2rem;gap:2rem;margin-top:3rem;position:relative}.workflow-step{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:2rem;text-align:center;transition:all .3s ease;position:relative}.workflow-step:hover{transform:translateY(-5px);border-color:var(--accent-blue);box-shadow:0 10px 30px rgba(59,130,246,.2)}.step-number{width:60px;height:60px;background:linear-gradient(135deg,var(--accent-blue),var(--accent-light));color:var(--text-white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;margin:0 auto 1.5rem}.workflow-step h3{font-size:1.25rem;margin-bottom:.75rem;color:var(--text-primary)}.workflow-step p{color:var(--text-tertiary);line-height:1.6;margin:0}.benefits-section{background:var(--bg-primary)}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-gap:2rem;gap:2rem;margin-top:3rem}.benefit-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:2rem;display:grid;grid-template-columns:200px 1fr;grid-gap:2rem;gap:2rem;align-items:center;transition:all .3s ease}.benefit-item:hover{transform:translateY(-5px);border-color:var(--accent-blue);box-shadow:0 10px 30px rgba(59,130,246,.2)}.benefit-left{display:flex;flex-direction:column;align-items:center;text-align:center}.benefit-icon{font-size:3rem;margin-bottom:1rem}.benefit-left h3{font-size:1.25rem;color:var(--text-primary);margin:0}.benefit-right{display:flex;align-items:center}.benefit-right p{color:var(--text-tertiary);line-height:1.6;margin:0}.use-cases-section{background:var(--bg-secondary)}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:1.5rem;gap:1.5rem;margin-top:2rem}.use-case-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:.75rem;padding:1.5rem;text-align:center;color:var(--text-primary);font-weight:500;transition:all .3s ease}.use-case-item:hover{border-color:var(--accent-blue);background:rgba(59,130,246,.1);transform:translateY(-3px)}.cta-section{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));text-align:center}.cta-content{max-width:800px;margin:0 auto}.cta-content .heading{color:var(--text-white)}.cta-content .subheading{color:hsla(0,0%,100%,.9);margin-bottom:2rem}.cta-note{margin-top:1rem;color:hsla(0,0%,100%,.8);font-size:.95rem}@media (max-width:768px){.features-grid{grid-template-columns:1fr}.tech-grid{grid-template-columns:repeat(2,1fr)}.benefit-item,.benefits-grid,.capabilities-grid,.use-cases-grid,.workflow-steps{grid-template-columns:1fr}.benefit-item{gap:1.5rem;text-align:center}.benefit-left{width:100%}.portfolio-item-large{padding:2rem}.intro-text{text-align:center}}