/* ═══════════════════════════════════════════════════════
   SPRUCE UP — technologies.css  (Hub)  prefix: tec-
   Sections: Hero · Grid · Connect · Machines CTA · Logos · CTA
═══════════════════════════════════════════════════════ */
:root {
    --tec-yellow:  #FFCD11;
    --tec-charcoal:#1C1C1C;
    --tec-white:   #ffffff;
    --tec-gray:    #f5f5f5;
    --tec-border:  rgba(28,28,28,0.1);
    --tec-dim:     #666666;
    --tec-amber:   #a07800;
    --tec-font:    'Poppins', sans-serif;
    --tec-radius:  10px;
    --tec-ease:    cubic-bezier(0.4,0,0.2,1);
    --tec-trans:   0.22s var(--tec-ease);
}
.tec-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.tec-reveal { opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; }
.tec-reveal.is-visible { opacity:1; transform:none; }
.tec-reveal--d1 { transition-delay:.08s; }
.tec-reveal--d2 { transition-delay:.16s; }
.tec-reveal--d3 { transition-delay:.24s; }
.tec-eyebrow { display:inline-block; font-family:var(--tec-font); font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--tec-yellow); margin-bottom:12px; }
.tec-section-title { font-family:var(--tec-font); font-size:36px; font-weight:700; line-height:1.15; color:var(--tec-charcoal); margin:0 0 14px; }
.tec-section-sub { font-family:var(--tec-font); font-size:15px; line-height:1.7; color:var(--tec-dim); margin:0; max-width:580px; }

/* Buttons */
.tec-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; font-family:var(--tec-font); font-size:13px; font-weight:700; text-decoration:none; border-radius:8px; border:2px solid transparent; transition:background var(--tec-trans),transform var(--tec-trans),border-color var(--tec-trans),color var(--tec-trans); }
.tec-btn svg { width:13px; height:13px; flex-shrink:0; transition:transform var(--tec-trans); }
.tec-btn:hover svg { transform:translateX(3px); }
.tec-btn--yellow { background:var(--tec-yellow); color:var(--tec-charcoal); border-color:var(--tec-yellow); }
.tec-btn--yellow:hover { background:#EABC00; transform:translateY(-1px); }
.tec-btn--outline { background:transparent; color:var(--tec-charcoal); border-color:var(--tec-border); }
.tec-btn--outline:hover { border-color:var(--tec-charcoal); }
.tec-btn--outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,0.4); }
.tec-btn--outline-light:hover { border-color:#fff; }

/* HERO */
.tec-hero { background:var(--tec-white); padding:80px 0 72px; border-bottom:1px solid var(--tec-border); position:relative; overflow:hidden; }
.tec-hero::after { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tec-yellow); }
.tec-breadcrumb { font-family:var(--tec-font); font-size:12px; color:var(--tec-dim); padding:16px 0 20px; display:flex; align-items:center; gap:8px; }
.tec-breadcrumb a { color:var(--tec-dim); text-decoration:none; }
.tec-breadcrumb a:hover { color:var(--tec-charcoal); }
.tec-hero__inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.tec-hero__eyebrow { font-family:var(--tec-font); font-size:10px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--tec-yellow); display:block; margin-bottom:16px; }
.tec-hero__title { font-family:var(--tec-font); font-size:52px; font-weight:800; line-height:1.08; color:var(--tec-charcoal); margin:0 0 8px; letter-spacing:-.02em; }
.tec-hero__title em { font-style:normal; color:var(--tec-yellow); }
.tec-hero__accent { width:48px; height:3px; background:var(--tec-yellow); margin:20px 0; }
.tec-hero__desc { font-family:var(--tec-font); font-size:16px; line-height:1.75; color:var(--tec-dim); margin:0 0 32px; max-width:480px; }
.tec-hero__actions { display:flex; gap:14px; flex-wrap:wrap; }
.tec-hero__stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tec-hero__stat { background:var(--tec-gray); border:1px solid var(--tec-border); border-radius:8px; padding:20px 20px 22px; transition:border-color var(--tec-trans); }
.tec-hero__stat:hover { border-color:var(--tec-yellow); }
.tec-hero__stat-num { font-family:var(--tec-font); font-size:32px; font-weight:800; color:var(--tec-yellow); display:block; line-height:1; letter-spacing:-.02em; }
.tec-hero__stat-label { font-family:var(--tec-font); font-size:11px; font-weight:500; color:var(--tec-dim); margin-top:6px; display:block; }

/* GRID SECTION */
.tec-grid-section { background:#fff; padding:80px 0; }
.tec-section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; gap:32px; }
.tec-section-head__link { font-family:var(--tec-font); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tec-charcoal); text-decoration:none; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:gap var(--tec-trans); }
.tec-section-head__link:hover { gap:10px; }
.tec-section-head__link svg { width:12px; height:12px; }
.tec-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.tec-card { display:block; text-decoration:none; border:1px solid var(--tec-border); border-radius:var(--tec-radius); overflow:hidden; background:#fff; padding:32px; transition:border-color var(--tec-trans),box-shadow var(--tec-trans),transform var(--tec-trans); }
.tec-card:hover { border-color:var(--tec-yellow); box-shadow:0 8px 32px rgba(255,205,17,.12); transform:translateY(-3px); }
.tec-card__icon-wrap { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.tec-card__icon { width:52px; height:52px; background:rgba(255,205,17,.12); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--tec-amber); flex-shrink:0; }
.tec-card__icon svg { width:26px; height:26px; }
.tec-card__series { font-family:var(--tec-font); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--tec-yellow); }
.tec-card__name { font-family:var(--tec-font); font-size:20px; font-weight:700; color:var(--tec-charcoal); margin:0 0 10px; }
.tec-card__desc { font-family:var(--tec-font); font-size:14px; line-height:1.65; color:var(--tec-dim); margin:0 0 20px; }
.tec-card__stats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tec-card__stat { font-family:var(--tec-font); font-size:10px; font-weight:700; background:rgba(255,205,17,.12); color:var(--tec-amber); padding:4px 10px; border-radius:4px; border:1px solid rgba(255,205,17,.3); }
.tec-card__machines { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.tec-card__machine { font-family:var(--tec-font); font-size:10px; font-weight:600; background:var(--tec-gray); color:var(--tec-charcoal); padding:4px 10px; border-radius:4px; border:1px solid var(--tec-border); }
.tec-card__link { font-family:var(--tec-font); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tec-charcoal); display:flex; align-items:center; gap:6px; transition:gap var(--tec-trans); }
.tec-card:hover .tec-card__link { gap:10px; color:var(--tec-amber); }
.tec-card__link svg { width:12px; height:12px; }

/* CONNECT SECTION */
.tec-connect { background:var(--tec-gray); padding:80px 0; border-top:3px solid var(--tec-yellow); }
.tec-connect__head { text-align:center; margin-bottom:56px; }
.tec-connect__head .tec-section-sub { margin:0 auto; }
.tec-connect__steps { display:flex; align-items:flex-start; gap:0; }
.tec-connect__step { flex:1; padding:28px 24px; background:#fff; border:1px solid var(--tec-border); border-radius:var(--tec-radius); }
.tec-connect__arrow { flex-shrink:0; padding:0 8px; display:flex; align-items:center; margin-top:32px; color:var(--tec-amber); }
.tec-connect__arrow svg { width:20px; height:20px; }
.tec-connect__num { font-family:var(--tec-font); font-size:28px; font-weight:800; color:var(--tec-yellow); display:block; margin-bottom:12px; }
.tec-connect__title { font-family:var(--tec-font); font-size:16px; font-weight:700; color:var(--tec-charcoal); margin:0 0 8px; }
.tec-connect__desc { font-family:var(--tec-font); font-size:13px; line-height:1.65; color:var(--tec-dim); margin:0; }

/* MACHINES CTA BAND */
.tec-machines-cta { background:var(--tec-charcoal); padding:80px 0; }
.tec-machines-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:48px; }
.tec-machines-cta__title { font-family:var(--tec-font); font-size:34px; font-weight:800; color:#fff; margin:0 0 12px; line-height:1.2; }
.tec-machines-cta__desc { font-family:var(--tec-font); font-size:15px; line-height:1.7; color:rgba(255,255,255,.65); margin:0; max-width:480px; }
.tec-machines-cta__actions { display:flex; gap:12px; flex-shrink:0; align-items:center; }

/* LOGOS reuse hp-logos-section from applications.css */
.hp-logos-section { background:#fff; padding:56px 0 60px; overflow:hidden; border-top:1px solid #f0f0f0; }
.hp-logos-block { margin-bottom:40px; }
.hp-logos-block:last-child { margin-bottom:0; }
.hp-logos-block__eyebrow { font-family:var(--tec-font); font-size:10px; font-weight:700; letter-spacing:.20em; text-transform:uppercase; color:#aaa; margin:0 0 18px; text-align:center; }
.hp-marquee-wrap { overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%); padding:8px 0; }
.hp-marquee-strip { display:inline-flex; align-items:center; gap:48px; white-space:nowrap; }
.hp-marquee-wrap--ltr .hp-marquee-strip { animation:hp-ltr 22s linear infinite; }
@keyframes hp-ltr { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.hp-marquee-wrap:hover .hp-marquee-strip { animation-play-state:paused; }
.hp-marquee-wrap--ltr .hp-marquee-strip img { height:72px; width:auto; max-width:180px; object-fit:contain; display:inline-block; vertical-align:middle; }

/* CTA BAND */
.tec-cta { background:#1C1C1C; padding:80px 0; }
.tec-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:48px; }
.tec-cta__title { font-family:var(--tec-font); font-size:34px; font-weight:800; color:#ffffff; margin:0 0 10px; line-height:1.2; }
.tec-cta__title em { font-style:normal; color:rgba(255,255,255,.45); }
.tec-cta__desc { font-family:var(--tec-font); font-size:15px; line-height:1.7; color:rgba(255,255,255,.55); margin:0; max-width:480px; }
.tec-cta__actions { display:flex; gap:12px; flex-shrink:0; align-items:center; }
/* Override outline btn on dark CTA bg */
.tec-cta .tec-btn--outline { color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.25); }
.tec-cta .tec-btn--outline:hover { color:#fff; border-color:rgba(255,255,255,.6); }

/* RESPONSIVE */
@media(max-width:1024px){.tec-inner{padding:0 32px;}.tec-hero__title{font-size:42px;}.tec-cards{grid-template-columns:1fr;}.tec-connect__steps{flex-direction:column;}.tec-connect__arrow{transform:rotate(90deg);padding:4px 0;align-self:center;}.tec-machines-cta__inner{flex-direction:column;text-align:center;}.tec-machines-cta__desc{margin:0 auto;}.tec-cta__inner{flex-direction:column;text-align:center;}.tec-cta__desc{margin:0 auto;}}
@media(max-width:768px){.tec-hero__inner{grid-template-columns:1fr;}.tec-hero__stats{display:none;}.tec-hero{padding:56px 0 48px;}.tec-hero__title{font-size:34px;}.tec-section-head{flex-direction:column;align-items:flex-start;}}
@media(max-width:600px){.tec-inner{padding:0 20px;}}