/* ================================================
   PLUSPULS Corporate Design System · styles.css
   Based on Styleguide v1.0 · März 2026
   ================================================ */

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

:root{
  --orange-500:#FF6B2C;
  --orange-400:#FF8A50;
  --orange-300:#FFB088;
  --orange-200:#FFD4BA;
  --orange-100:#FFF0E6;
  --orange-600:#E5551A;
  --orange-700:#C44510;
  --dark:#1A1A1A;
  --dark-800:#2D2D2D;
  --dark-700:#3A3A3A;
  --gray-50:#FAFAF8;
  --gray-100:#F8F7F5;
  --gray-200:#EDECEA;
  --gray-300:#D4D3D0;
  --gray-400:#9E9D9A;
  --gray-500:#6B6A67;
  --white:#FFFFFF;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Outfit',system-ui,sans-serif;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --shadow-card:0 2px 12px rgba(0,0,0,0.04);
  --shadow-hover:0 12px 40px rgba(255,107,44,0.08);
  --shadow-btn:4px 4px 0 var(--dark);
  --shadow-btn-hover:2px 2px 0 var(--dark);
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--dark);background:var(--gray-100);overflow-x:hidden}

/* ===== PCB PATTERN (reusable SVG symbol) ===== */
.pcb-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ===== NAVIGATION ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.1rem 3.5rem;
  display:flex;align-items:center;gap:2.5rem;
  background:rgba(248,247,245,0.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,0.04);
  transition:all .3s;
}
.nav.scrolled{padding:.75rem 3.5rem;box-shadow:0 2px 24px rgba(0,0,0,0.06)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo svg{width:34px;height:34px}
.logo-text{font-weight:800;font-size:1.05rem;color:var(--dark);letter-spacing:-.03em}
.logo-text span{color:var(--orange-500)}
.nav-links{display:flex;gap:2rem;margin-left:1.5rem}
.nav-links a{
  text-decoration:none;color:var(--gray-500);font-size:.88rem;font-weight:500;
  transition:color .2s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--orange-500);transition:width .3s;border-radius:1px;
}
.nav-links a:hover{color:var(--dark)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--orange-500)}
.nav-links a.active::after{width:100%}
.nav-cta{
  margin-left:auto;padding:.55rem 1.3rem;
  background:var(--orange-500);color:var(--white);border:2px solid var(--dark);
  font-family:var(--font-body);font-size:.82rem;font-weight:600;
  border-radius:7px;cursor:pointer;transition:all .25s;
  box-shadow:3px 3px 0 var(--dark);text-decoration:none;
}
.nav-cta:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--dark);background:var(--orange-600)}

/* Mobile menu */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--dark);margin:5px 0;transition:all .3s}

/* ===== PAGE HERO (subpages) ===== */
.page-hero{
  padding:10rem 3.5rem 5rem;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--dark) 0%,#2D1810 50%,var(--dark-800) 100%);
}
.page-hero .bg-orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,var(--orange-500),transparent 70%);
  opacity:.12;z-index:0;
}
.page-hero .orb1{width:500px;height:500px;top:-20%;right:-5%}
.page-hero .orb2{width:300px;height:300px;bottom:-10%;left:5%}
.page-hero-content{position:relative;z-index:2;max-width:700px}
.page-hero .section-tag{
  background:rgba(255,107,44,.12);border-color:rgba(255,107,44,.25);color:var(--orange-400);
}
.page-hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4.5vw,3.8rem);
  font-weight:400;line-height:1.12;letter-spacing:-.02em;
  color:var(--white);margin-bottom:1.2rem;
}
.page-hero h1 em{
  font-style:italic;font-weight:700;
  background:linear-gradient(135deg,var(--orange-400),var(--orange-600));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-hero p{
  font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.55);
  max-width:560px;margin-bottom:2rem;
}
.page-hero .cta-row{display:flex;gap:1.2rem;flex-wrap:wrap}

/* ===== SHARED ELEMENTS ===== */
.section-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .85rem;border-radius:50px;
  background:rgba(255,107,44,.06);border:1px solid rgba(255,107,44,.12);
  font-size:.72rem;font-weight:600;color:var(--orange-500);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw,2.6rem);
  font-weight:400;line-height:1.15;letter-spacing:-.02em;margin-bottom:.6rem;
}
.section-title em{font-style:italic;font-weight:700;color:var(--orange-500)}
.section-sub{font-size:.95rem;color:var(--gray-500);max-width:520px;line-height:1.6;margin-bottom:2.5rem}

/* ===== BUTTONS ===== */
.cta-primary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.8rem;background:var(--orange-500);color:var(--white);
  border:2px solid var(--dark);font-family:var(--font-body);
  font-size:.92rem;font-weight:600;border-radius:8px;cursor:pointer;
  text-decoration:none;box-shadow:4px 4px 0 var(--dark);transition:all .25s;
}
.cta-primary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dark);background:var(--orange-600)}

.cta-secondary{
  padding:.85rem 1.8rem;background:transparent;color:var(--dark);
  border:1.5px solid var(--dark);font-family:var(--font-body);
  font-size:.92rem;font-weight:600;border-radius:8px;cursor:pointer;
  text-decoration:none;transition:all .25s;display:inline-flex;align-items:center;gap:.5rem;
}
.cta-secondary:hover{background:var(--dark);color:var(--white)}

.cta-white{
  padding:.85rem 1.8rem;background:transparent;color:var(--white);
  border:1.5px solid rgba(255,255,255,.3);font-family:var(--font-body);
  font-size:.92rem;font-weight:600;border-radius:8px;cursor:pointer;
  text-decoration:none;transition:all .25s;display:inline-flex;align-items:center;gap:.5rem;
}
.cta-white:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

/* ===== SECTIONS ===== */
.section{padding:5.5rem 3.5rem}
.section-white{background:var(--white)}
.section-gray{background:var(--gray-100)}
.section-dark{
  background:linear-gradient(135deg,var(--dark) 0%,#2D1810 50%,var(--dark-800) 100%);
  position:relative;overflow:hidden;
}
.section-dark .bg-orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,var(--orange-500),transparent 70%);
  opacity:.12;z-index:0;
}
.section-dark .section-tag{background:rgba(255,107,44,.12);border-color:rgba(255,107,44,.25);color:var(--orange-400)}
.section-dark .section-title{color:var(--white)}
.section-dark .section-title em{color:var(--orange-400)}
.section-dark .section-sub{color:rgba(255,255,255,.5)}
.section-dark .inner{position:relative;z-index:2}

.section-center{text-align:center}
.section-center .section-sub{margin-left:auto;margin-right:auto}

/* ===== SERVICE CARDS (pillar cards) ===== */
.card-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}

.service-card{
  padding:2rem;border-radius:var(--radius-xl);
  border:1px solid var(--gray-200);background:var(--white);
  transition:all .4s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
}
.service-card .pcb-layer{
  position:absolute;inset:0;border-radius:inherit;
  opacity:0;transition:opacity .5s ease;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 110% 120%,rgba(255,107,44,.06) 0%,transparent 70%);
}
.service-card:hover .pcb-layer{opacity:1}
.service-card:hover{
  transform:translateY(-4px);border-color:var(--orange-300);
  box-shadow:0 16px 48px rgba(255,107,44,.10),0 2px 12px rgba(0,0,0,.04);
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange-500),var(--orange-300));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.service-card:hover::before{transform:scaleX(1)}

.service-card.priority{
  border-color:var(--orange-400);
  background:linear-gradient(135deg,rgba(255,107,44,.03),var(--white));
}
.service-card.priority::before{transform:scaleX(1)}

.card-icon{
  width:44px;height:44px;border-radius:11px;
  margin-bottom:1.2rem;background:rgba(255,107,44,.07);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s;
}
.service-card:hover .card-icon{background:rgba(255,107,44,.14)}
.service-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;position:relative;z-index:1}
.service-card p{font-size:.85rem;color:var(--gray-500);line-height:1.55;position:relative;z-index:1}
.service-card ul{list-style:none;margin-top:.8rem;position:relative;z-index:1}
.service-card ul li{
  font-size:.82rem;color:var(--gray-500);padding:.3rem 0 .3rem 1rem;
  position:relative;line-height:1.5;
}
.service-card ul li::before{
  content:'';position:absolute;left:0;top:.65rem;
  width:5px;height:5px;border-radius:50%;background:var(--orange-400);
}
.card-link{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:1rem;
  font-size:.78rem;font-weight:600;color:var(--orange-500);text-decoration:none;
  position:relative;z-index:1;transition:gap .2s;
}
.card-link:hover{gap:.5rem}
.card-arrow{transition:transform .2s}
.card-link:hover .card-arrow{transform:translateX(3px)}

/* Dark cards */
.dark-card{
  padding:2rem;border-radius:var(--radius-xl);
  background:linear-gradient(145deg,var(--dark-800),var(--dark));
  border:1px solid rgba(255,107,44,.15);
  transition:all .4s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
}
.dark-card:hover{
  border-color:rgba(255,107,44,.4);transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(255,107,44,.15);
}
.dark-card h3{font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.dark-card p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.55}
.dark-card .card-icon{background:rgba(255,107,44,.12)}
.dark-card:hover .card-icon{background:rgba(255,107,44,.22)}

/* Glass stat cards */
.stat-card{
  padding:1.5rem;border-radius:16px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);transition:all .35s;
}
.stat-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-3px)}
.stat-num{
  font-family:var(--font-display);font-size:2.2rem;font-weight:700;
  color:var(--orange-400);margin-bottom:.25rem;
}
.stat-label{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.4}

/* ===== PROCESS STEPS ===== */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  margin-top:2.5rem;position:relative;
}
.steps::before{
  content:'';position:absolute;top:38px;left:16%;right:16%;height:2px;
  background:linear-gradient(90deg,var(--orange-300),var(--orange-500),var(--orange-300));z-index:0;
}
.step{text-align:center;position:relative;z-index:1}
.step-num{
  width:56px;height:56px;border-radius:50%;margin:0 auto 1.2rem;
  background:var(--orange-500);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.4rem;font-weight:700;
  border:3px solid var(--white);box-shadow:0 4px 16px rgba(255,107,44,.2);
}
.step h3{font-size:1.05rem;font-weight:600;margin-bottom:.4rem}
.step p{font-size:.85rem;color:var(--gray-500);line-height:1.5;max-width:280px;margin:0 auto}

/* ===== FAQ ===== */
.faq-list{max-width:720px;margin:0 auto}
.faq-item{
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  margin-bottom:.8rem;background:var(--white);overflow:hidden;transition:all .3s;
}
.faq-item:hover{border-color:var(--orange-300)}
.faq-question{
  padding:1.3rem 1.5rem;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-weight:600;font-size:.95rem;
}
.faq-question .faq-toggle{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,107,44,.07);display:flex;align-items:center;justify-content:center;
  transition:all .3s;flex-shrink:0;
}
.faq-item.open .faq-toggle{background:var(--orange-500);transform:rotate(45deg)}
.faq-item.open .faq-toggle svg{stroke:white}
.faq-answer{
  max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;
}
.faq-item.open .faq-answer{max-height:300px;padding:0 1.5rem 1.3rem}
.faq-answer p{font-size:.88rem;color:var(--gray-500);line-height:1.6}

/* ===== BLOG CARDS ===== */
.blog-card{
  border-radius:14px;overflow:hidden;border:1px solid var(--gray-200);
  background:var(--white);transition:all .35s;
}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.blog-thumb{height:180px;position:relative;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover}
.blog-cat{
  position:absolute;top:1rem;left:1rem;padding:.25rem .7rem;border-radius:50px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.7rem;font-weight:600;color:var(--orange-600);
}
.blog-body{padding:1.4rem}
.blog-body h3{font-size:1rem;font-weight:600;margin-bottom:.4rem;line-height:1.35}
.blog-body p{font-size:.82rem;color:var(--gray-500);line-height:1.5}
.blog-date{font-size:.72rem;color:var(--gray-400);margin-top:.6rem}

/* ===== TEAM CARDS ===== */
.team-card{
  border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--gray-200);background:var(--white);transition:all .35s;
}
.team-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,107,44,.06);border-color:var(--orange-300)}
.team-photo{
  height:260px;background:linear-gradient(135deg,var(--gray-200),var(--gray-100));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.team-photo .initials{
  font-family:var(--font-display);font-size:3rem;font-weight:700;
  color:var(--gray-300);
}
.team-info{padding:1.4rem}
.team-info h3{font-size:1.05rem;font-weight:600;margin-bottom:.2rem}
.team-info .role{font-size:.82rem;color:var(--orange-500);font-weight:500;margin-bottom:.5rem}
.team-info p{font-size:.82rem;color:var(--gray-500);line-height:1.5}

/* ===== TESTIMONIALS ===== */
.testimonial{
  padding:2rem;border-radius:var(--radius-xl);
  background:var(--white);border:1px solid var(--gray-200);
  transition:all .35s;
}
.testimonial:hover{border-color:var(--orange-300);box-shadow:0 8px 30px rgba(255,107,44,.06)}
.testimonial blockquote{
  font-size:.95rem;line-height:1.65;color:var(--gray-500);
  font-style:italic;margin-bottom:1.2rem;position:relative;padding-left:1.5rem;
}
.testimonial blockquote::before{
  content:'"';position:absolute;left:0;top:-.2rem;
  font-family:var(--font-display);font-size:2rem;color:var(--orange-400);font-weight:700;
}
.testimonial .author{display:flex;align-items:center;gap:.8rem}
.testimonial .author-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-300),var(--orange-500));
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:var(--white);
}
.testimonial .author-name{font-size:.85rem;font-weight:600}
.testimonial .author-role{font-size:.75rem;color:var(--gray-400)}

/* ===== CONTACT FORM ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group.full{grid-column:1/-1}
.form-label{font-size:.82rem;font-weight:500;color:var(--dark)}
.form-input{
  padding:.75rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:.88rem;color:var(--dark);
  transition:all .3s;background:var(--white);
}
.form-input:focus{outline:none;border-color:var(--orange-500);box-shadow:0 0 0 3px rgba(255,107,44,.1)}
textarea.form-input{min-height:140px;resize:vertical}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239E9D9A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}

/* ===== ROI CALCULATOR ===== */
.roi-calculator{
  padding:2.5rem;border-radius:var(--radius-2xl);
  background:var(--white);border:1px solid var(--gray-200);
  box-shadow:var(--shadow-card);
}
.roi-slider-group{margin-bottom:1.5rem}
.roi-slider-group label{font-size:.88rem;font-weight:500;color:var(--dark);display:block;margin-bottom:.5rem}
.roi-slider-group .slider-value{
  font-family:var(--font-display);font-size:1.4rem;font-weight:700;
  color:var(--orange-500);float:right;
}
.roi-slider{
  width:100%;height:6px;border-radius:3px;background:var(--gray-200);
  -webkit-appearance:none;appearance:none;outline:none;cursor:pointer;
}
.roi-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--orange-500);border:3px solid var(--white);
  box-shadow:0 2px 8px rgba(255,107,44,.3);cursor:pointer;
}
.roi-result{
  margin-top:1.5rem;padding:1.5rem;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(255,107,44,.04),rgba(255,107,44,.08));
  border:1px solid rgba(255,107,44,.15);
}
.roi-result h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--orange-600);margin-bottom:.6rem;font-weight:700}
.roi-result .roi-number{
  font-family:var(--font-display);font-size:2.4rem;font-weight:700;
  color:var(--orange-500);
}
.roi-result .roi-detail{font-size:.85rem;color:var(--gray-500);margin-top:.3rem}

/* ===== TECH STACK ===== */
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}
.tech-item{
  padding:1.2rem;border-radius:var(--radius-lg);background:var(--white);
  border:1px solid var(--gray-200);text-align:center;
  transition:all .3s;
}
.tech-item:hover{border-color:var(--orange-300);transform:translateY(-2px)}
.tech-item .tech-name{font-size:.82rem;font-weight:600;margin-top:.5rem}
.tech-item svg{width:32px;height:32px;margin:0 auto}

/* ===== FOOTER ===== */
.footer{background:var(--dark);color:rgba(255,255,255,.4);padding:4rem 3.5rem 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand p{font-size:.85rem;line-height:1.6;margin-top:.7rem;max-width:280px}
.footer h4{
  color:var(--white);font-size:.82rem;font-weight:600;margin-bottom:.9rem;
  letter-spacing:.05em;text-transform:uppercase;
}
.footer a{color:rgba(255,255,255,.4);text-decoration:none;font-size:.85rem;display:block;margin-bottom:.45rem;transition:color .2s}
.footer a:hover{color:var(--orange-400)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem;
  font-size:.78rem;display:flex;justify-content:space-between;
}

/* ===== REVEAL ANIMATION ===== */
.reveal{opacity:0;transform:translateY(24px);transition:all .7s ease}
.reveal.v{opacity:1;transform:translateY(0)}

/* ===== BADGE ===== */
.badge{
  display:inline-block;padding:.2rem .6rem;border-radius:50px;
  background:var(--orange-500);color:var(--white);
  font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.badge-outline{
  display:inline-block;padding:.2rem .6rem;border-radius:50px;
  background:rgba(255,107,44,.07);color:var(--orange-500);
  border:1px solid rgba(255,107,44,.15);
  font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}

/* ===== USE CASE CARD ===== */
.usecase-card{
  padding:2rem;border-radius:var(--radius-xl);
  background:var(--white);border:1px solid var(--gray-200);
  transition:all .4s;
}
.usecase-card:hover{border-color:var(--orange-300);transform:translateY(-3px);box-shadow:0 12px 40px rgba(255,107,44,.08)}
.usecase-card .case-tag{font-size:.72rem;font-weight:700;color:var(--orange-500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem}
.usecase-card h3{font-size:1.05rem;font-weight:600;margin-bottom:.5rem}
.usecase-card p{font-size:.85rem;color:var(--gray-500);line-height:1.55}
.usecase-card .case-result{
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--gray-200);
  display:flex;align-items:center;gap:.6rem;
}
.usecase-card .result-value{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--orange-500)}
.usecase-card .result-label{font-size:.78rem;color:var(--gray-400)}

/* ===== VALUE GRID (features w/ icon) ===== */
.value-item{display:flex;gap:1rem;align-items:flex-start}
.value-icon{
  width:44px;height:44px;min-width:44px;border-radius:11px;
  background:rgba(255,107,44,.07);display:flex;align-items:center;justify-content:center;
}
.value-item h3{font-size:1rem;font-weight:600;margin-bottom:.3rem}
.value-item p{font-size:.85rem;color:var(--gray-500);line-height:1.5}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .card-grid-4{grid-template-columns:1fr 1fr}
  .card-grid-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .page-hero{padding:8rem 2rem 4rem}
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:auto}
}
@media(max-width:700px){
  .nav{padding:.9rem 1.5rem}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .card-grid-4,.card-grid-3,.card-grid-2,.steps{grid-template-columns:1fr}
  .steps::before{display:none}
  .section,.section-white,.section-gray{padding:3rem 1.5rem}
  .page-hero{padding:7rem 1.5rem 3rem}
  .footer{padding:3rem 1.5rem 1.5rem}
  .footer-grid{grid-template-columns:1fr}
  .page-hero h1{font-size:2rem}
}


/* ================================================
   HOMEPAGE-SPECIFIC STYLES (index.html)
   ================================================ */

/* ===== HOMEPAGE HERO ===== */
.hero{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;align-items:center;padding:7rem 3.5rem 4rem;
}
.hero-content{position:relative;z-index:10;max-width:560px;flex-shrink:0}

/* Image Comparison Slider */
.hero-visual{
  position:absolute;top:0;right:0;bottom:0;width:55%;
  overflow:hidden;pointer-events:auto;
}
.img-compare{
  position:relative;width:calc(100% - 16px);height:calc(100% - 32px);
  padding-right:16px;padding-bottom:32px;
  cursor:ew-resize;user-select:none;-webkit-user-select:none;
}
.img-compare img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.img-compare-before{z-index:1}
.img-compare-after-wrap{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden;
}
.img-compare-after-wrap img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.img-compare-handle{
  position:absolute;top:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:3px;background:rgba(255,255,255,.85);
  transform:translateX(-50%);cursor:ew-resize;
}
.img-compare-handle::before,.img-compare-handle::after{
  content:'';display:block;width:3px;flex:1;background:rgba(255,255,255,.85);
}
.img-compare-btn{
  width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform .15s,box-shadow .15s;
}
.img-compare.dragging .img-compare-btn{
  transform:scale(1.12);box-shadow:0 4px 22px rgba(0,0,0,.30);
}
.img-compare-btn svg{width:22px;height:22px;color:#444}
.img-compare-label{
  position:absolute;bottom:1.6rem;z-index:4;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem 1rem .45rem .75rem;border-radius:50px;
  font-family:var(--font-body);font-size:.78rem;font-weight:600;
  letter-spacing:.02em;pointer-events:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.img-compare-label .badge-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.img-compare-label.before{
  left:1.4rem;background:rgba(15,15,15,.42);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);box-shadow:0 4px 18px rgba(0,0,0,.22);
}
.img-compare-label.before .badge-dot{background:rgba(255,255,255,.55)}
.img-compare-label.after{
  right:1.4rem;background:rgba(255,107,44,.28);
  border:1px solid rgba(255,107,44,.45);
  color:rgba(255,255,255,.96);box-shadow:0 4px 18px rgba(255,107,44,.18);
}
.img-compare-label.after .badge-dot{
  background:var(--orange-400);box-shadow:0 0 6px rgba(255,107,44,.7);
}

/* Hero text elements */
.hero-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .9rem;border-radius:50px;
  background:rgba(255,107,44,.07);border:1px solid rgba(255,107,44,.14);
  font-size:.78rem;font-weight:500;color:var(--orange-600);
  margin-bottom:1.4rem;width:fit-content;animation:fadeUp .8s ease both;
}
.hero-tag i{
  width:6px;height:6px;border-radius:50%;
  background:var(--orange-500);animation:pulse 2s infinite;display:inline-block;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

h1.hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,4.8vw,4.2rem);
  font-weight:400;line-height:1.12;letter-spacing:-.02em;
  margin-bottom:1.4rem;animation:fadeUp .8s ease .12s both;
}
h1.hero-title em{
  font-style:italic;font-weight:700;display:block;
  background:linear-gradient(135deg,var(--orange-500),var(--orange-700));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  font-size:1.02rem;line-height:1.7;color:var(--gray-500);
  max-width:440px;margin-bottom:2.2rem;animation:fadeUp .8s ease .24s both;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* CTA row in hero */
.hero .cta-row{animation:fadeUp .8s ease .36s both}

/* Trust indicators */
.trust-row{
  display:flex;align-items:center;gap:2rem;margin-top:2rem;
  animation:fadeUp .8s ease .48s both;flex-wrap:wrap;
}
.trust-item{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--gray-400)}
.trust-item strong{color:var(--dark);font-weight:700;font-size:1.1rem}
.trust-item .dot{width:4px;height:4px;border-radius:50%;background:var(--gray-300);margin:0 .3rem}

/* Client logos bar */
.client-bar{
  display:flex;align-items:center;gap:2.5rem;margin-top:3rem;
  padding-top:2rem;border-top:1px solid var(--gray-200);
  animation:fadeUp .8s ease .6s both;
}
.client-bar span{
  font-size:1.05rem;font-weight:700;color:var(--gray-300);
  letter-spacing:.015em;transition:color .3s;
}
.client-bar span:hover{color:var(--gray-400)}

/* ===== PROBLEMS SECTION ===== */
.problems{background:var(--white);padding:5.5rem 3.5rem}
.problems-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.5rem}
.problem-card{
  padding:1.8rem;border-radius:14px;background:var(--gray-50);
  border:1px solid var(--gray-200);transition:all .35s;
}
.problem-card:hover{border-color:var(--orange-300);transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,107,44,.06)}
.problem-icon{
  width:44px;height:44px;border-radius:11px;margin-bottom:1rem;
  background:rgba(255,107,44,.07);display:flex;align-items:center;justify-content:center;
}
.problem-icon svg{width:22px;height:22px}
.problem-card h3{font-size:1rem;font-weight:600;margin-bottom:.5rem}
.problem-card p{font-size:.85rem;color:var(--gray-500);line-height:1.55}

/* ===== 4 PILLARS ===== */
.pillars{padding:5.5rem 3.5rem}
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.pillar-card{
  padding:2rem;border-radius:16px;border:1px solid var(--gray-200);
  background:var(--white);transition:all .4s;position:relative;overflow:hidden;
}
.pillar-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange-500),var(--orange-300));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.pillar-card:hover{transform:translateY(-4px);border-color:var(--orange-300);box-shadow:0 12px 40px rgba(255,107,44,.08)}
.pillar-card:hover::before{transform:scaleX(1)}
.pillar-card.priority{border-color:var(--orange-400);background:linear-gradient(135deg,rgba(255,107,44,.03),var(--white))}
.pillar-card.priority::before{transform:scaleX(1)}
.pillar-badge{
  display:inline-block;padding:.2rem .6rem;border-radius:50px;
  background:var(--orange-500);color:var(--white);
  font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.8rem;
}
.pillar-icon{font-size:1.6rem;margin-bottom:1rem;display:block;line-height:1}
.pillar-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.6rem}
.pillar-card ul{list-style:none;margin-top:.8rem}
.pillar-card ul li{
  font-size:.82rem;color:var(--gray-500);padding:.3rem 0 .3rem 1rem;
  position:relative;line-height:1.5;
}
.pillar-card ul li::before{
  content:'';position:absolute;left:0;top:.65rem;
  width:5px;height:5px;border-radius:50%;background:var(--orange-400);
}

/* ===== SPOTLIGHT (Automatisierung) ===== */
.spotlight{
  background:linear-gradient(135deg,var(--dark) 0%,#2D1810 50%,var(--dark-800) 100%);
  padding:5.5rem 3.5rem;position:relative;overflow:hidden;
}
.spotlight .bg-orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,var(--orange-500),transparent 70%);
  opacity:.12;z-index:0;
}
.spotlight .bo1{width:400px;height:400px;top:-15%;right:8%}
.spotlight .bo2{width:280px;height:280px;bottom:-8%;left:4%}
.spot-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.spot-text .section-tag{background:rgba(255,107,44,.12);border-color:rgba(255,107,44,.25);color:var(--orange-400)}
.spot-text .section-title{color:var(--white)}
.spot-text .section-title em{color:var(--orange-400)}
.spot-text p{color:rgba(255,255,255,.5);font-size:.95rem;line-height:1.65;margin-bottom:1.5rem}
.spot-text .cta-primary{border-color:var(--orange-500)}
.spot-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}

/* ===== PROCESS ===== */
.process{background:var(--white);padding:5.5rem 3.5rem}

/* ===== BLOG TEASER ===== */
.blog-section{padding:5.5rem 3.5rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}

/* ===== FINAL CTA ===== */
.final-cta{
  margin:0 3.5rem 3.5rem;border-radius:20px;padding:4rem;
  background:linear-gradient(135deg,var(--dark),#2D1810);
  position:relative;overflow:hidden;text-align:center;
}
.final-cta .bg-orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,var(--orange-500),transparent 70%);opacity:.1;
}
.final-cta .fo1{width:300px;height:300px;top:-20%;right:-5%}
.final-cta .fo2{width:200px;height:200px;bottom:-15%;left:10%}
.final-cta h2{
  font-family:var(--font-display);font-size:2.4rem;color:var(--white);
  font-weight:400;margin-bottom:.8rem;position:relative;z-index:2;
}
.final-cta h2 em{font-style:italic;font-weight:700;color:var(--orange-400)}
.final-cta p{
  color:rgba(255,255,255,.5);margin-bottom:2rem;position:relative;z-index:2;
  max-width:480px;margin-left:auto;margin-right:auto;line-height:1.6;
}
.final-cta .cta-primary{position:relative;z-index:2;border-color:var(--orange-500)}

/* ===== HOMEPAGE RESPONSIVE ===== */
@media(max-width:1100px){
  .hero{padding:7rem 2rem 3rem}
  .hero-visual{width:50%}
  .pillars-grid,.problems-grid{grid-template-columns:1fr 1fr}
  .spot-inner{grid-template-columns:1fr}
}
@media(max-width:700px){
  .hero{padding:6rem 1.5rem 2.5rem;flex-direction:column}
  .hero-visual{position:relative;width:100%;height:320px;margin-top:2rem}
  h1.hero-title{font-size:2.2rem}
  .pillars-grid,.problems-grid,.blog-grid,.spot-stats{grid-template-columns:1fr}
  .steps::before{display:none}
  .client-bar{flex-wrap:wrap;gap:1.2rem}
  .problems,.process,.blog-section,.pillars,.spotlight{padding:3rem 1.5rem}
  .final-cta{margin:0 1.5rem 1.5rem;padding:2.5rem 1.5rem}
}
/* POC Automatisierung Styles */
.auto-hero{
  padding:10rem 3.5rem 5rem;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--dark) 0%,#2D1810 50%,var(--dark-800) 100%);
  min-height:85vh;display:flex;align-items:center;
}
.auto-hero .bg-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--orange-500),transparent 70%);opacity:.12;z-index:0}
.auto-hero .orb1{width:600px;height:600px;top:-25%;right:-8%}
.auto-hero .orb2{width:350px;height:350px;bottom:-10%;left:2%}
.auto-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.auto-hero-text h1{
  font-family:var(--font-display);font-size:clamp(2.4rem,4.5vw,3.6rem);
  font-weight:400;line-height:1.12;color:var(--white);margin-bottom:1.2rem;
}
.auto-hero-text h1 em{
  font-style:italic;font-weight:700;
  background:linear-gradient(135deg,var(--orange-400),var(--orange-600));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.auto-hero-text p{font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.55);max-width:500px;margin-bottom:2rem}
.auto-hero-text .section-tag{background:rgba(255,107,44,.12);border-color:rgba(255,107,44,.25);color:var(--orange-400)}
.auto-hero-text .cta-primary{border-color:var(--orange-500)}

/* Animated workflow visualization */
.workflow-visual{
  position:relative;height:420px;
}
.wf-node{
  position:absolute;padding:1rem 1.3rem;border-radius:12px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);font-size:.82rem;font-weight:500;
  display:flex;align-items:center;gap:.6rem;
  animation:wfFloat 3s ease-in-out infinite alternate;
}
.wf-node svg{width:20px;height:20px;stroke:var(--orange-400);flex-shrink:0}
.wf-node.n1{top:5%;left:10%;animation-delay:0s}
.wf-node.n2{top:25%;right:5%;animation-delay:.4s}
.wf-node.n3{top:50%;left:5%;animation-delay:.8s}
.wf-node.n4{bottom:20%;right:10%;animation-delay:1.2s}
.wf-node.n5{bottom:5%;left:25%;animation-delay:.6s}
.wf-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100px;height:100px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-500),var(--orange-700));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 80px rgba(255,107,44,.3);
  animation:wfPulse 2s ease-in-out infinite;
}
.wf-center svg{width:40px;height:40px;stroke:white}
.wf-line{
  position:absolute;top:50%;left:50%;
  width:120px;height:1px;background:linear-gradient(90deg,rgba(255,107,44,.4),transparent);
  transform-origin:left center;
}
.wf-line.l1{transform:rotate(-35deg)}
.wf-line.l2{transform:rotate(25deg)}
.wf-line.l3{transform:rotate(145deg)}
.wf-line.l4{transform:rotate(-145deg)}
.wf-line.l5{transform:rotate(200deg)}
@keyframes wfFloat{0%{transform:translateY(0)}100%{transform:translateY(-8px)}}
@keyframes wfPulse{0%,100%{box-shadow:0 0 40px rgba(255,107,44,.2)}50%{box-shadow:0 0 80px rgba(255,107,44,.4)}}

/* Stats */
.auto-stats{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap}
.stat-card{padding:1rem 1.4rem;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(255,255,255,.1);flex:1;min-width:130px}
.stat-num{font-size:1.6rem;font-weight:700;color:var(--white)}
.stat-label{font-size:.72rem;color:rgba(255,255,255,.5)}

/* Pain points */
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem}
.pain-card{
  padding:1.5rem;border-radius:var(--radius-lg);
  background:var(--gray-50);border:1px solid var(--gray-200);
  display:flex;gap:1rem;align-items:flex-start;transition:all .3s;
}
.pain-card:hover{border-color:var(--orange-300);transform:translateY(-2px)}
.pain-icon{
  width:40px;height:40px;min-width:40px;border-radius:10px;
  background:rgba(255,107,44,.07);display:flex;align-items:center;justify-content:center;
}
.pain-card h3{font-size:.95rem;font-weight:600;margin-bottom:.3rem}
.pain-card p{font-size:.82rem;color:var(--gray-500);line-height:1.5}

/* Before/After */
.ba-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;margin-top:2rem}
.ba-card{padding:2rem;border-radius:var(--radius-xl);position:relative}
.ba-before{background:var(--gray-50);border:1px solid var(--gray-200)}
.ba-after{background:linear-gradient(135deg,rgba(255,107,44,.04),rgba(255,107,44,.08));border:1px solid rgba(255,107,44,.2)}
.ba-card h3{font-size:1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.ba-card ul{list-style:none}
.ba-card ul li{
  padding:.5rem 0 .5rem 1.5rem;font-size:.88rem;color:var(--gray-500);
  position:relative;line-height:1.5;
}
.ba-before ul li::before{content:'✗';position:absolute;left:0;color:var(--gray-400);font-weight:700}
.ba-after ul li::before{content:'✓';position:absolute;left:0;color:var(--orange-500);font-weight:700}
.ba-arrow{font-size:2rem;color:var(--orange-500);font-weight:700}

/* Responsive */
@media(max-width:1100px){
  .auto-hero-inner{grid-template-columns:1fr}
  .workflow-visual{display:none}
  .ba-grid{grid-template-columns:1fr}
  .ba-arrow{text-align:center}
  .pain-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .auto-hero{padding:7rem 1.5rem 3rem;min-height:auto}
}