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

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

/* BREADCRUMB */
.ts-breadcrumb { font-family:var(--ts-font); font-size:12px; color:var(--ts-dim); padding:16px 0; background:#fff; }
.ts-breadcrumb__inner { display:flex; align-items:center; gap:8px; }
.ts-breadcrumb a { color:var(--ts-dim); text-decoration:none; }
.ts-breadcrumb a:hover { color:var(--ts-charcoal); }
.ts-breadcrumb__sep { opacity:.4; }

/* HERO — always dark */
.ts-hero { background:var(--ts-dark); position:relative; overflow:hidden; min-height:480px; display:flex; align-items:center; }
.ts-hero__overlay { position:absolute; inset:0; background:linear-gradient(105deg,rgba(20,20,20,.85) 0%,rgba(20,20,20,.65) 55%,rgba(20,20,20,.4) 100%); z-index:1; }
.ts-hero__inner { position:relative; z-index:2; padding:72px 0; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.ts-hero__category { font-family:var(--ts-font); font-size:10px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--ts-yellow); display:block; margin-bottom:16px; }
.ts-hero__title { font-family:var(--ts-font); font-size:52px; font-weight:800; line-height:1.06; color:#fff; margin:0 0 8px; letter-spacing:-.02em; }
.ts-hero__accent { width:48px; height:3px; background:var(--ts-yellow); margin:20px 0; }
.ts-hero__desc { font-family:var(--ts-font); font-size:16px; line-height:1.75; color:rgba(255,255,255,.85); margin:0 0 28px; max-width:500px; }
.ts-hero__actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.ts-hero__machines { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ts-hero__machines-label { font-family:var(--ts-font); font-size:11px; color:rgba(255,255,255,.55); }
.ts-hero__machine-tag { font-family:var(--ts-font); font-size:11px; font-weight:600; background:rgba(255,205,17,.15); color:var(--ts-yellow); border:1px solid rgba(255,205,17,.3); padding:4px 12px; border-radius:4px; text-decoration:none; transition:background var(--ts-trans); }
.ts-hero__machine-tag:hover { background:rgba(255,205,17,.25); }
.ts-hero__specs { display:grid; grid-template-columns:1fr; gap:14px; }
.ts-hero__spec { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:20px 24px; backdrop-filter:blur(8px); transition:border-color var(--ts-trans); }
.ts-hero__spec:hover { border-color:var(--ts-yellow); }
.ts-hero__spec-val { font-family:var(--ts-font); font-size:28px; font-weight:800; color:var(--ts-yellow); display:block; line-height:1; letter-spacing:-.01em; }
.ts-hero__spec-label { font-family:var(--ts-font); font-size:11px; font-weight:500; color:rgba(255,255,255,.65); margin-top:6px; display:block; }

/* HOW IT WORKS */
.ts-how { background:var(--ts-gray); padding:80px 0; }
.ts-how__head { margin-bottom:48px; }
.ts-how__steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ts-how__step { background:#fff; border:1px solid var(--ts-border); border-radius:var(--ts-radius); padding:28px; display:flex; align-items:flex-start; gap:18px; transition:border-color var(--ts-trans); }
.ts-how__step:hover { border-color:var(--ts-yellow); }
.ts-how__step-num { font-family:var(--ts-font); font-size:22px; font-weight:800; color:var(--ts-yellow); flex-shrink:0; line-height:1; margin-top:2px; }
.ts-how__step-title { font-family:var(--ts-font); font-size:16px; font-weight:700; color:var(--ts-charcoal); margin:0 0 8px; }
.ts-how__step-desc { font-family:var(--ts-font); font-size:13.5px; line-height:1.65; color:var(--ts-dim); margin:0; }

/* WHY IT MATTERS */
.ts-why { background:#fff; padding:80px 0; border-top:1px solid var(--ts-border); }
.ts-why__head { margin-bottom:48px; }
.ts-why__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ts-why-card { background:var(--ts-gray); border:1px solid var(--ts-border); border-radius:var(--ts-radius); padding:28px; transition:border-color var(--ts-trans); }
.ts-why-card:hover { border-color:var(--ts-yellow); }
.ts-why-card__num { font-family:var(--ts-font); font-size:11px; font-weight:700; letter-spacing:.15em; color:var(--ts-yellow); display:block; margin-bottom:10px; }
.ts-why-card__title { font-family:var(--ts-font); font-size:16px; font-weight:700; color:var(--ts-charcoal); margin:0 0 10px; }
.ts-why-card__desc { font-family:var(--ts-font); font-size:13.5px; line-height:1.65; color:var(--ts-dim); margin:0; }

/* AVAILABLE ON */
.ts-available { background:var(--ts-gray); padding:80px 0; border-top:3px solid var(--ts-yellow); }
.ts-available__head { margin-bottom:48px; }
.ts-available__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.ts-machine-card { display:block; text-decoration:none; background:#fff; border:1px solid var(--ts-border); border-radius:var(--ts-radius); overflow:hidden; transition:border-color var(--ts-trans),box-shadow var(--ts-trans),transform var(--ts-trans); }
.ts-machine-card:hover { border-color:var(--ts-yellow); box-shadow:0 8px 32px rgba(255,205,17,.12); transform:translateY(-3px); }
.ts-machine-card__img { height:220px; overflow:hidden; background:var(--ts-gray); }
.ts-machine-card__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s var(--ts-ease); }
.ts-machine-card:hover .ts-machine-card__img img { transform:scale(1.04); }
.ts-machine-card__body { padding:24px 28px 28px; }
.ts-machine-card__series { font-family:var(--ts-font); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ts-yellow); display:block; margin-bottom:6px; }
.ts-machine-card__name { font-family:var(--ts-font); font-size:20px; font-weight:700; color:var(--ts-charcoal); margin:0 0 8px; }
.ts-machine-card__desc { font-family:var(--ts-font); font-size:13.5px; line-height:1.65; color:var(--ts-dim); margin:0 0 16px; }
.ts-machine-card__link { font-family:var(--ts-font); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ts-charcoal); display:flex; align-items:center; gap:6px; transition:gap var(--ts-trans); }
.ts-machine-card:hover .ts-machine-card__link { gap:10px; color:var(--ts-amber); }
.ts-machine-card__link svg { width:12px; height:12px; }

/* MORE TECHNOLOGIES */
.ts-more { background:#fff; padding:80px 0; border-top:1px solid var(--ts-border); }
.ts-more__head { margin-bottom:40px; }
.ts-more__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ts-more-card { display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; background:var(--ts-gray); border:1px solid var(--ts-border); border-radius:var(--ts-radius); padding:28px; min-height:160px; transition:border-color var(--ts-trans),background var(--ts-trans),transform var(--ts-trans); }
.ts-more-card:hover { border-color:var(--ts-yellow); background:#fff; transform:translateY(-2px); }
.ts-more-card__series { font-family:var(--ts-font); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ts-yellow); display:block; margin-bottom:8px; }
.ts-more-card__name { font-family:var(--ts-font); font-size:16px; font-weight:700; color:var(--ts-charcoal); margin:0 0 8px; }
.ts-more-card__desc { font-family:var(--ts-font); font-size:13px; color:var(--ts-dim); margin:0 0 20px; }
.ts-more-card__link { font-family:var(--ts-font); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ts-charcoal); display:flex; align-items:center; gap:6px; transition:gap var(--ts-trans); }
.ts-more-card:hover .ts-more-card__link { gap:10px; color:var(--ts-amber); }
.ts-more-card__link svg { width:12px; height:12px; }

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

/* Shared logo/carousel classes (same as other pages) */
.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(--ts-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;}
.hp-logos-block--clients{padding-top:40px;border-top:1px solid #f0f0f0;}
.hp-caro-viewport{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%);}
.hp-caro-track{display:flex;will-change:transform;}
.hp-caro-slide{flex:0 0 calc(100% / 8);display:flex;align-items:center;justify-content:center;padding:8px 16px;}
.hp-caro-slide img{height:56px;width:auto;max-width:120px;object-fit:contain;display:block;filter:grayscale(.4) opacity(.75);transition:filter .2s ease;}
.hp-caro-slide img:hover{filter:none;}
.hp-caro-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;}
.hp-caro-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(28,28,28,.15);cursor:pointer;padding:0;transition:background .2s ease,transform .2s ease;}
.hp-caro-dot.is-active{background:var(--ts-yellow);transform:scale(1.25);}

/* RESPONSIVE */
@media(max-width:1024px){.ts-inner{padding:0 32px;}.ts-hero__title{font-size:40px;}.ts-how__steps{grid-template-columns:repeat(2,1fr);}.ts-why__grid{grid-template-columns:repeat(2,1fr);}.ts-cta__inner{flex-direction:column;text-align:center;}.ts-cta__desc{margin:0 auto;}}
@media(max-width:768px){.ts-hero__inner{grid-template-columns:1fr;}.ts-hero__specs{display:none;}.ts-hero{min-height:400px;}.ts-hero__title{font-size:32px;}.ts-how__steps{grid-template-columns:1fr;}.ts-why__grid{grid-template-columns:1fr;}.ts-available__grid{grid-template-columns:1fr;}.ts-more__grid{grid-template-columns:1fr;}}
@media(max-width:600px){.ts-inner{padding:0 20px;}.hp-caro-slide{flex:0 0 calc(100% / 4);}}