/* ===== Breeze HR marketing site ===== */
:root{
  --navy:#16284A; --navy2:#1E3D63; --blue:#2A5080; --accent:#2F6FE0; --accent2:#5B8DB8;
  --ink:#0F1B30; --ink2:#475569; --ink3:#8a97ac; --line:#E6EAF0; --bg:#ffffff; --bg2:#F5F8FC;
  --r:14px; --rs:10px; --shadow:0 24px 60px rgba(16,32,60,.14); --shadow-sm:0 8px 24px rgba(16,32,60,.08);
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);line-height:1.6;background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}

/* nav */
.nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:28px}
.nav-logo{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
.logo-mk{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:#16284A;color:#8FB8FF;font-size:11px;font-weight:800;letter-spacing:.02em;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:8px}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink2)}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-signin{font-size:14px;font-weight:600;color:var(--ink2)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;border-radius:10px;padding:11px 22px;transition:transform .12s,box-shadow .15s,background .15s;cursor:pointer;border:none;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(47,111,224,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(47,111,224,.36)}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent2);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-lg{padding:15px 30px;font-size:15px;border-radius:12px}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(165deg,#5B8DB8 0%,#3D6A96 32%,#243F66 70%,#16284A 100%);color:#fff}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 78% 12%,rgba(255,255,255,.12),transparent 55%),radial-gradient(ellipse at 12% 90%,rgba(0,30,70,.35),transparent 55%);pointer-events:none}
.hero-in{position:relative;max-width:var(--max);margin:0 auto;padding:96px 32px 92px;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:6px 13px;border-radius:30px;margin-bottom:22px}
.hero h1{font-size:54px;font-weight:800;letter-spacing:-.04em;line-height:1.06;margin-bottom:20px}
.hero h1 .grad{background:linear-gradient(90deg,#9bd6ff,#bca8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:18px;color:rgba(255,255,255,.78);line-height:1.7;max-width:520px;margin-bottom:32px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-sub{margin-top:20px;font-size:13px;color:rgba(255,255,255,.55)}
.hero-art{position:relative}
.hero-photo{border-radius:18px;box-shadow:0 40px 80px rgba(8,18,40,.5);border:1px solid rgba(255,255,255,.18);aspect-ratio:4/3;object-fit:cover;width:100%}
.hero-chip{position:absolute;background:#fff;color:var(--ink);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.hero-chip:hover{transform:translateY(-3px);box-shadow:0 30px 70px rgba(8,18,40,.55)}
.hero-chip .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-chip.c1{left:-26px;top:38px}
.hero-chip.c2{right:-22px;bottom:54px}

/* hero app composite (real product screenshots) */
.app-stage{position:relative;width:100%;max-width:600px;margin:36px 0 36px auto}
.app-shot{display:block;border-radius:14px;background:#fff}
.app-main{width:100%;border:1px solid rgba(255,255,255,.22);box-shadow:0 44px 90px -20px rgba(8,18,40,.6);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.app-float{position:absolute;border-radius:11px;border:3px solid #fff;box-shadow:0 28px 60px -14px rgba(8,18,40,.55);overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.app-trackers{width:70%;top:-34px;right:-46px;z-index:3}
.app-calendar{width:66%;left:-58px;bottom:-30px;z-index:3}
.app-chip{position:absolute;left:-30px;top:42%;z-index:4;display:flex;align-items:flex-start;gap:10px;background:#fff;color:var(--ink);border-radius:13px;padding:12px 15px;max-width:248px;box-shadow:0 24px 55px -12px rgba(8,18,40,.5);font-size:12.5px;line-height:1.45}
.app-chip strong{font-weight:700}
.app-chip .ic{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c5cff,#3d8bff);color:#fff}
.app-chip .ic svg{width:16px;height:16px}
.app-stage:hover .app-trackers{transform:translateY(-5px)}
.app-stage:hover .app-calendar{transform:translateY(5px)}

/* logos / marquee */
.logos{padding:30px 0;border-bottom:1px solid var(--line);background:var(--bg)}
.logos p{text-align:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-row{display:flex;gap:56px;width:max-content;animation:scrollx 26s linear infinite}
.marquee-row span{font-size:18px;font-weight:700;color:#9aa6b8;white-space:nowrap}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* sections */
.section{padding:92px 0}
.section.alt{background:var(--bg2)}
.s-head{max-width:680px;margin-bottom:48px}
.s-head.center{margin-left:auto;margin-right:auto;text-align:center}
.s-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.s-head h2{font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1.12;margin-bottom:16px}
.s-head p{font-size:18px;color:var(--ink2);line-height:1.7}

/* feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);border-color:#d7deea}
.card .ci{width:46px;height:46px;border-radius:12px;background:#EAF1FD;color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ci svg{width:22px;height:22px}
.tcard .ci svg{width:20px;height:20px}
.hero-chip .ic svg{width:14px;height:14px}
.int-logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.int-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:11px 20px;font-size:14px;font-weight:600;color:var(--ink)}
.int-pill svg{width:18px;height:18px;color:var(--accent)}
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sec{display:flex;flex-direction:column;gap:8px}
.sec .si{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff}
.sec .si svg{width:20px;height:20px}
.sec h3{font-size:15px;font-weight:700;color:#fff}
.sec p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6}
@media (max-width:880px){.sec-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sec-grid{grid-template-columns:1fr}}
.card h3{font-size:17px;font-weight:700;margin-bottom:8px}
.card p{font-size:14px;color:var(--ink2);line-height:1.65}

/* split (image + text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .split-text{order:2}
.split-img{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.split-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.split-text h2{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:14px}
.split-text p{font-size:16px;color:var(--ink2);line-height:1.75;margin-bottom:16px}
.tick{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;font-size:15px;color:var(--ink)}
.tick svg{flex-shrink:0;width:20px;height:20px;color:#16a34a;margin-top:2px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .n{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(90deg,var(--accent),#7c5cff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .l{font-size:14px;color:var(--ink2);margin-top:8px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:st}
.step{position:relative;padding:26px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.step::before{counter-increment:st;content:counter(st);position:absolute;top:-16px;left:24px;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(47,111,224,.35)}
.step h3{font-size:17px;font-weight:700;margin:10px 0 8px}
.step p{font-size:14px;color:var(--ink2)}

/* quote */
.quote{max-width:840px;margin:0 auto;text-align:center}
.quote blockquote{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.4;color:var(--ink)}
.quote .by{margin-top:22px;font-size:14px;color:var(--ink2)}

/* CTA */
.cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#2A5080,#16284A);color:#fff;text-align:center;border-radius:24px;padding:64px 40px;margin:0 32px}
.cta h2{font-size:36px;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.cta p{color:rgba(255,255,255,.78);font-size:17px;margin-bottom:30px}

/* footer */
.foot{background:var(--navy);color:rgba(255,255,255,.7);padding:60px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-logo{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:12px}
.foot-logo .logo-mk{background:#2F6FE0;color:#fff}
.foot p{font-size:13.5px;line-height:1.7;max-width:280px}
.foot h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.foot ul{list-style:none}
.foot li{margin-bottom:9px}
.foot li a{font-size:14px;color:rgba(255,255,255,.7)}
.foot li a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12.5px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:10px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* article (template/guide pages) */
.crumb{font-size:13px;color:var(--ink3);padding-top:26px}
.crumb a:hover{color:var(--accent)}
.article{max-width:840px;margin:0 auto;padding:0 32px}
.article h1{font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:1.12;margin:18px 0 16px}
.article .lede{font-size:18px;color:var(--ink2);line-height:1.7;margin-bottom:8px}
.article h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:38px 0 12px}
.article h3{font-size:17px;font-weight:700;margin:22px 0 8px}
.article p{font-size:16px;color:#334155;line-height:1.85;margin-bottom:14px}
.article ul{margin:0 0 16px 22px}.article li{font-size:16px;color:#334155;line-height:1.8;margin-bottom:7px}
.tmpl{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:28px 30px;margin:18px 0 8px}
.tmpl p{font-size:15px;color:var(--ink);line-height:1.9;margin-bottom:13px}
.ph{color:var(--accent);font-weight:600;background:#EAF1FD;border-radius:4px;padding:0 4px}
.copy-row{display:flex;justify-content:flex-end;margin-top:8px}
.copy-btn{font-size:13px;font-weight:600;color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 17px;cursor:pointer;font-family:inherit}
.copy-btn:hover{background:var(--bg2)}
.ai-cta{background:linear-gradient(135deg,#3D6A96,#16284A);color:#fff;border-radius:16px;padding:26px 30px;margin:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ai-cta h3{font-size:19px;font-weight:700;color:#fff;margin-bottom:6px}
.ai-cta p{font-size:14px;color:rgba(255,255,255,.8);margin:0;max-width:460px}
.disclaimer{background:#FFFBEB;border:1px solid #FCD34D;border-radius:12px;padding:16px 18px;margin:30px 0 6px}
.disclaimer b{display:block;font-size:13px;color:#92400e;margin-bottom:4px}
.disclaimer p{font-size:12.5px;color:#7a5b1e;line-height:1.6;margin:0}
.faq-item{border-top:1px solid var(--line);padding:18px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{font-size:16px;font-weight:700;margin-bottom:8px}
.faq-a{font-size:15px;color:var(--ink2);line-height:1.75}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{font-size:14px;color:var(--accent);background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:8px 15px;font-weight:500}
.chips a:hover{background:#e8eefb}

/* templates hub */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .16s,box-shadow .16s,border-color .16s}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:#d7deea}
.tcard .ci{width:40px;height:40px;border-radius:10px;background:#EAF1FD;color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tcard h3{font-size:16px;font-weight:700;margin-bottom:6px}
.tcard p{font-size:13.5px;color:var(--ink2);line-height:1.55}
.tcard .go{margin-top:12px;font-size:13px;font-weight:600;color:var(--accent)}

@media (max-width:880px){
  .hero-in{grid-template-columns:1fr;gap:40px;padding:72px 24px 64px}
  .hero h1{font-size:40px}.hero-art{max-width:520px;margin:0 auto}
  .app-stage{margin:30px auto;max-width:500px}
  .app-trackers{right:-20px;top:-24px}.app-calendar{left:-26px;bottom:-22px}.app-chip{left:-12px}
  .grid,.steps,.tgrid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr;gap:32px 20px}
  .split{grid-template-columns:1fr;gap:28px}.split.rev .split-text{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .s-head h2{font-size:32px}.article h1{font-size:32px}
}
@media (max-width:560px){
  .wrap,.nav-in,.hero-in{padding-left:20px;padding-right:20px}
  .nav-links{display:none}
  .grid,.steps,.tgrid,.stats{grid-template-columns:1fr}
  .hero h1{font-size:34px}.section{padding:64px 0}.cta{margin:0 20px}
  .app-chip{display:none}
  .app-trackers{width:76%;right:-8px;top:-16px}.app-calendar{width:74%;left:-10px;bottom:-14px}
}

/* ===== Tasteful flow (no flashing/floating; honours reduced-motion) ===== */
.hero h1 .grad{background-size:220% auto}
.hero::before{will-change:transform}
/* premium accent line that draws in on card hover */
.card{position:relative;overflow:hidden}
.card::after{content:'';position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent),#7c5cff);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.card:hover::after{transform:scaleX(1)}
/* image zoom-on-reveal for split/hero photos */
.split-img img,.hero-photo{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.split-img:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion: no-preference){
  .hero::before{animation:auroraDrift 30s ease-in-out infinite alternate}
  @keyframes auroraDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.1)}}
  .hero h1 .grad{animation:gradShift 7.5s ease-in-out infinite alternate}
  @keyframes gradShift{from{background-position:0% center}to{background-position:100% center}}
}

/* ===== Pricing ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:8px}
.price-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;transition:transform .18s,box-shadow .18s,border-color .18s}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.price-card.feat{border-color:var(--accent);box-shadow:var(--shadow);position:relative}
.price-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 14px;border-radius:20px;box-shadow:0 6px 16px rgba(47,111,224,.35)}
.price-name{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.price-tag{font-size:15px;font-weight:600;color:var(--accent);margin-top:6px}
.price-desc{font-size:14px;color:var(--ink2);line-height:1.6;margin:14px 0 18px}
.price-list{list-style:none;margin:0 0 24px;display:flex;flex-direction:column;gap:12px}
.price-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink);line-height:1.5}
.price-list svg{flex-shrink:0;width:18px;height:18px;color:#16a34a;margin-top:2px}
.price-card .btn{margin-top:auto;width:100%;justify-content:center}
.price-note{max-width:680px;margin:34px auto 0;text-align:center;font-size:14px;color:var(--ink2);line-height:1.7}
@media (max-width:880px){.price-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}

/* ===== Hero product demo (bespoke, looping) ===== */
.demo{background:#fff;border-radius:16px;box-shadow:0 40px 80px rgba(8,18,40,.5);border:1px solid rgba(255,255,255,.18);overflow:hidden}
.demo-top{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#0F2747}
.dt-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.demo-tab{margin-left:10px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.09);padding:5px 11px;border-radius:7px}
.demo-stage{padding:22px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#F7FAFE,#fff)}
.dcard{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 8px 22px rgba(16,32,60,.06)}
.dc-ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dc-ic svg{width:18px;height:18px}
.ic-mail{background:#EAF1FD;color:#2F6FE0}
.ic-ok{background:#E7F8EF;color:#16a34a}
.dc-tx{flex:1;min-width:0}
.dc-t{font-size:14px;font-weight:700;color:var(--ink)}
.dc-s{font-size:12.5px;color:var(--ink2);margin-top:2px}
.dc-tag{font-size:11px;font-weight:700;color:#92400e;background:#FFF3D6;border:1px solid #FCD9A0;border-radius:20px;padding:4px 10px;flex-shrink:0}
.d-draft{flex-direction:column;align-items:stretch;gap:9px}
.dc-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--accent)}
.dc-head svg{width:15px;height:15px}
.dc-ln{height:8px;border-radius:5px;background:#E9EEF6}
.dc-ln.a{width:92%}.dc-ln.b{width:78%}.dc-ln.c{width:62%}
@media (prefers-reduced-motion: no-preference){
  .d-email{animation:seqEmail 12s ease-in-out infinite}
  .d-draft{animation:seqDraft 12s ease-in-out infinite}
  .d-track{animation:seqTrack 12s ease-in-out infinite}
  .dc-ln.a{animation:typA 12s ease-in-out infinite}
  .dc-ln.b{animation:typB 12s ease-in-out infinite}
  .dc-ln.c{animation:typC 12s ease-in-out infinite}
  @keyframes seqEmail{0%{opacity:0;transform:translateY(12px)}5%{opacity:1;transform:none}93%{opacity:1;transform:none}99%{opacity:0}}
  @keyframes seqDraft{0%,24%{opacity:0;transform:translateY(12px)}30%{opacity:1;transform:none}93%{opacity:1;transform:none}99%{opacity:0}}
  @keyframes seqTrack{0%,54%{opacity:0;transform:translateY(12px)}60%{opacity:1;transform:none}93%{opacity:1;transform:none}99%{opacity:0}}
  @keyframes typA{0%,30%{width:0}38%{width:92%}99%{width:92%}}
  @keyframes typB{0%,38%{width:0}46%{width:78%}99%{width:78%}}
  @keyframes typC{0%,46%{width:0}54%{width:62%}99%{width:62%}}
}