:root {
  --navy: #1B2A4A;
  --navy-deep: #0F1A2E;
  --navy-mid: #162236;
  --navy-light: #243558;
  --copper: #C17F3E;
  --copper-light: #D4956A;
  --cream: #FAF8F5;
  --cream-dark: #F0EDE8;
  --gray: #8A9BB0;
  --white: #FFFFFF;
  --text-dark: #1B2A4A;
  --text-body: #4A5568;
  --border: rgba(27,42,74,0.12);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Montserrat",sans-serif;background:var(--cream);color:var(--text-dark);overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* LOADER */
#loader{position:fixed;inset:0;background:var(--navy-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9000;transition:opacity 0.8s ease,visibility 0.8s ease}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-text{font-size:clamp(28px,5vw,48px);font-weight:800;color:var(--white);letter-spacing:0.3em;font-family:"Montserrat",sans-serif;min-height:1.2em}
.loader-text span{opacity:0;transition:opacity 0.08s ease}
.loader-text span.visible{opacity:1}
.loader-line{width:0;height:1px;background:var(--copper);margin-top:16px;transition:width 1.5s ease}
.loader-line.expanded{width:200px}

/* PROGRESS BAR */
#progress-bar{position:fixed;top:0;left:0;height:2px;background:var(--copper);z-index:8000;width:0%;transition:width 0.1s linear}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:800;padding:20px 48px;display:flex;align-items:center;justify-content:space-between;transition:background 0.4s ease,backdrop-filter 0.4s ease,padding 0.3s ease}
nav.scrolled{background:rgba(15,26,46,0.94);backdrop-filter:blur(14px);padding:14px 48px;border-bottom:1px solid rgba(193,127,62,0.15)}
.nav-logo{display:flex;align-items:center;gap:12px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.nav-monogram{width:36px;height:36px;border:1.5px solid var(--copper);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--copper)}
.nav-brand{font-size:13px;font-weight:700;color:var(--white);letter-spacing:0.15em}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
.nav-links a{color:rgba(255,255,255,0.7);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;position:relative;transition:color 0.2s}
.nav-links a::after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--copper);transition:width 0.3s ease}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{width:100%}

.nav-btn{background:none;border:none;font-family:"Montserrat",sans-serif;color:rgba(255,255,255,0.7);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;padding:4px 0;position:relative;transition:color 0.2s}
.nav-btn::after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--copper);transition:width 0.3s ease}
.nav-btn:hover{color:var(--white)}
.nav-btn:hover::after{width:100%}
.mob-nav-btn{background:none;border:none;font-family:"Montserrat",sans-serif;font-size:1.4rem;font-weight:600;letter-spacing:0.05em;color:var(--white);cursor:pointer;padding:4px 0}
.nav-cta{padding:9px 22px;border:1px solid var(--copper);color:var(--copper);font-size:10px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;transition:all 0.3s ease;background:transparent;cursor:pointer;font-family:inherit}
.nav-cta:hover{background:var(--copper);color:var(--navy-deep)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px;background:none;border:none;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--white);transition:0.3s;display:block}
@media(min-width:769px){.nav-links{display:flex}}
@media(max-width:768px){nav{padding:16px 20px}nav.scrolled{padding:12px 20px}.nav-links{display:none !important}.burger{display:flex}
.nav-btn{background:none;border:none;font-family:"Montserrat",sans-serif;color:rgba(255,255,255,0.7);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;padding:4px 0;position:relative;transition:color 0.2s}
.nav-btn::after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--copper);transition:width 0.3s ease}
.nav-btn:hover{color:var(--white)}
.nav-btn:hover::after{width:100%}
.mob-nav-btn{background:none;border:none;font-family:"Montserrat",sans-serif;font-size:1.4rem;font-weight:600;letter-spacing:0.05em;color:var(--white);cursor:pointer;padding:4px 0}
.nav-cta{display:none}}

/* MOBILE NAV */
.mob-nav{position:fixed;inset:0;background:rgba(11,16,30,0.97);z-index:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:opacity 0.3s}
.mob-nav.open{opacity:1;pointer-events:auto}
.mob-nav a{font-size:1.4rem;font-weight:600;letter-spacing:0.05em;color:var(--white)}
.mob-nav .mob-cta{margin-top:16px;padding:14px 32px;border:1px solid var(--copper);color:var(--copper);font-size:0.85rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase}

/* HERO */
#hero{height:100vh;min-height:700px;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url("../assets/background.png");background-size:cover;background-position:center;filter:brightness(0.45) contrast(1.05);z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,30,0.2) 0%,rgba(15,26,46,0.55) 60%,rgba(11,16,30,0.9) 100%);z-index:1}
.hero-content{position:relative;z-index:2;padding:0 clamp(20px,5vw,80px);max-width:960px}
.hero-overline{font-size:11px;font-weight:600;letter-spacing:0.35em;text-transform:uppercase;color:var(--copper);margin-bottom:24px;opacity:0;animation:fadeUp 0.8s ease 0.3s forwards}
.hero-title{font-size:clamp(52px,9vw,96px);font-weight:900;letter-spacing:-0.02em;color:var(--white);line-height:1;margin-bottom:16px;opacity:0;animation:fadeUp 0.8s ease 0.5s forwards}
.hero-divider{width:0;height:2px;background:var(--copper);margin-bottom:20px;animation:expandLine 1s ease 0.9s forwards}
.hero-subtitle{font-size:clamp(16px,2.2vw,22px);font-weight:400;color:rgba(255,255,255,0.8);margin-bottom:12px;opacity:0;animation:fadeUp 0.8s ease 1.1s forwards}
.hero-tagline{font-size:clamp(17px,2.2vw,22px);font-weight:700;color:var(--copper);opacity:0;animation:fadeUp 0.8s ease 1.3s forwards}
.hero-action{margin-top:36px;opacity:0;animation:fadeUp 0.8s ease 1.5s forwards}
.hero-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:transparent;border:1px solid var(--copper);color:var(--copper);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;transition:all 0.3s ease}
.hero-btn:hover{background:var(--copper);color:var(--navy-deep)}
.hero-btn svg{transition:transform 0.3s}
.hero-btn:hover svg{transform:translateX(4px)}

/* PILLARS */
.pillars-strip{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(22,34,54,0.95);backdrop-filter:blur(8px);border-top:1px solid rgba(193,127,62,0.2);z-index:2}
.pillar{padding:20px 24px;border-right:1px solid rgba(255,255,255,0.06);transition:background 0.3s}
.pillar:last-child{border-right:none}
.pillar:hover{background:rgba(193,127,62,0.06)}
.pillar-title{font-size:10px;font-weight:700;color:var(--copper);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:5px}
.pillar-desc{font-size:11px;color:rgba(160,176,200,0.8);line-height:1.5}
@media(max-width:768px){.pillars-strip{grid-template-columns:repeat(2,1fr)}}

/* SECTIONS */
section{position:relative}
.section-inner{max-width:1100px;margin:0 auto;padding:96px 48px}
.sec-label{font-size:10px;font-weight:700;color:var(--copper);letter-spacing:0.35em;text-transform:uppercase;margin-bottom:14px}
.sec-title{font-size:clamp(28px,4vw,44px);font-weight:800;color:var(--navy);line-height:1.1;margin-bottom:10px}
.sec-title.light{color:var(--white)}
.sec-divider{width:48px;height:3px;background:var(--copper);margin-bottom:48px}
.reveal{opacity:0;transition:opacity 0.75s ease}
#about,#principles,#kinetic,#services,#contrast,#process,#faq,#team,#exclusivity,#footer-contact{scroll-margin-top:72px}
.reveal.visible{opacity:1}
@media(max-width:768px){.section-inner{padding:64px 20px}}

/* ABOUT */
#about{background:var(--cream)}
.quote-block{border-left:3px solid var(--copper);padding:20px 28px;background:var(--white);margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,0.04);font-size:clamp(14px,1.4vw,16px);color:var(--text-body);line-height:1.7}
.dark-card{background:var(--navy);padding:32px 36px;border-left:4px solid var(--copper);color:rgba(255,255,255,0.8);font-size:15px;line-height:1.7}
.dark-card-title{font-size:11px;font-weight:700;color:var(--copper);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:14px}

/* PRINCIPLES — BENTO */
#principles{background:var(--navy-deep)}
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.bento-card{background:var(--navy-mid);padding:40px 32px;border-bottom:3px solid transparent;transition:border-color 0.3s,background 0.3s}
.bento-card:hover{border-bottom-color:var(--copper);background:var(--navy-light)}
.bento-num{font-size:56px;font-weight:200;color:rgba(193,127,62,0.2);line-height:1;margin-bottom:20px;font-family:"EB Garamond",serif}
.bento-title{font-size:26px;font-weight:800;color:var(--copper);margin-bottom:12px;letter-spacing:-0.01em}
.bento-text{font-size:14px;color:rgba(255,255,255,0.75);line-height:1.65}
@media(max-width:768px){.bento-grid{grid-template-columns:1fr;gap:1px}}

/* KINETIC */
#kinetic{background:var(--navy-deep);overflow:hidden;padding:20px 0;border-top:1px solid rgba(193,127,62,0.1);border-bottom:1px solid rgba(193,127,62,0.1)}
.kinetic-outer{overflow:hidden;width:100%}
.kinetic-track{display:flex;width:max-content;animation:ticker 25s linear infinite;will-change:transform}
.kinetic-word{font-size:clamp(48px,8vw,80px);font-weight:900;color:rgba(255,255,255,0.15);letter-spacing:0.12em;text-transform:uppercase;padding:0 32px;flex-shrink:0;white-space:nowrap;user-select:none}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SERVICES */
#services{background:var(--cream)}
.svc-tabs{display:flex;gap:0;margin-bottom:40px;border-bottom:2px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.svc-tabs::-webkit-scrollbar{display:none}
.svc-tab{padding:14px 28px;background:transparent;border:none;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.2s;white-space:nowrap;flex-shrink:0}
.svc-tab.active{color:var(--navy);border-bottom-color:var(--copper)}
.svc-tab:hover{color:var(--navy)}
.svc-panel{display:none}
.svc-panel.active{display:block;animation:fadePanel 0.4s ease}
@keyframes fadePanel{from{opacity:0}to{opacity:1}}
.svc-intro{margin-bottom:24px;font-size:15px;color:var(--text-body);line-height:1.7}
.svc-list{display:grid;gap:12px;margin-bottom:28px}
.svc-item{padding:20px 24px;background:var(--white);border-left:3px solid var(--copper);box-shadow:0 1px 8px rgba(0,0,0,0.04)}
.svc-item strong{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px}
.svc-item p{font-size:14px;color:var(--text-body);line-height:1.6}
.svc-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:28px}
.stack-item{padding:14px 18px;background:var(--white);border:1px solid var(--border);font-size:13px;color:var(--text-body);line-height:1.5}
.stack-item strong{color:var(--navy);display:block;font-size:10px;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:4px}
.format-block{background:var(--navy);padding:32px 36px;margin-top:16px}
.format-title{font-size:11px;font-weight:700;color:var(--copper);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:16px}
.format-list li{font-size:14px;color:rgba(255,255,255,0.75);padding:8px 0 8px 20px;border-bottom:1px solid rgba(255,255,255,0.06);position:relative}
.format-list li::before{content:"—";position:absolute;left:0;color:var(--copper)}
.format-list li:last-child{border-bottom:none}

/* CONTRAST */
#contrast{background:var(--cream)}
.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.contrast-col{padding:36px}
.contrast-col.neg{background:rgba(27,42,74,0.04);border:1px solid var(--border)}
.contrast-col.pos{background:var(--navy);border-left:4px solid var(--copper)}
.contrast-head{font-size:11px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:24px}
.neg .contrast-head{color:var(--text-body)}
.pos .contrast-head{color:var(--copper)}
.contrast-list li{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;font-size:14px;line-height:1.6}
.neg .contrast-list li{color:var(--text-body)}
.pos .contrast-list li{color:rgba(255,255,255,0.8)}
.ci{flex-shrink:0;margin-top:2px;font-style:normal}
.ci-x{color:rgba(200,80,80,0.8)}
.ci-v{color:var(--copper)}
@media(max-width:768px){.contrast-grid{grid-template-columns:1fr}}

/* PROCESS */
#process{background:var(--navy-mid)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.timeline::before{content:"";position:absolute;top:24px;left:12.5%;right:12.5%;height:1px;background:rgba(193,127,62,0.2);z-index:0}
.t-step{text-align:center;padding:0 20px;position:relative}
.t-num{width:48px;height:48px;background:var(--navy-deep);border:1px solid rgba(193,127,62,0.4);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--copper);margin:0 auto 20px;position:relative;z-index:1}
.t-title{font-size:14px;font-weight:700;color:var(--white);margin-bottom:10px}
.t-desc{font-size:13px;color:var(--gray);line-height:1.5}
.process-note{text-align:center;margin-top:40px;font-family:"EB Garamond",serif;font-style:italic;font-size:16px;color:var(--gray)}
@media(max-width:768px){.timeline{grid-template-columns:1fr 1fr}.timeline::before{display:none}}

/* TEAM */
#team{background:var(--navy-deep)}
.team-intro{font-family:"EB Garamond",serif;font-style:italic;font-size:17px;color:var(--gray);line-height:1.7;margin-bottom:40px}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.team-card{background:var(--navy-mid);padding:36px;border-top:3px solid var(--copper)}
.team-name{font-size:28px;font-weight:800;color:var(--white);margin-bottom:6px}
.team-role{font-size:11px;font-weight:600;color:var(--copper);letter-spacing:0.08em;text-transform:uppercase;line-height:1.7;margin-bottom:20px}
.team-divider{width:40px;height:2px;background:rgba(193,127,62,0.3);margin-bottom:20px}
.team-list li{font-size:13.5px;color:rgba(255,255,255,0.65);line-height:1.6;padding:8px 0 8px 18px;border-bottom:1px solid rgba(255,255,255,0.05);position:relative}
.team-list li::before{content:"–";position:absolute;left:0;color:var(--copper)}
.team-list li:last-child{border-bottom:none}
@media(max-width:768px){.team-grid{grid-template-columns:1fr}}

/* EXCLUSIVITY */
#exclusivity{background:var(--cream-dark)}
.excl-inner{max-width:800px}
.excl-title{font-family:"EB Garamond",serif;font-style:italic;font-size:clamp(24px,3.5vw,38px);color:var(--navy);line-height:1.3;margin-bottom:24px}
.excl-text{font-size:15px;color:var(--text-body);line-height:1.8}

/* FOOTER */
footer{background:var(--navy-deep);border-top:1px solid rgba(193,127,62,0.15)}
.footer-inner{max-width:1100px;margin:0 auto;padding:64px 48px 40px;display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-monogram{width:40px;height:40px;border:1.5px solid var(--copper);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--copper)}
.footer-name{font-size:14px;font-weight:700;color:var(--white);letter-spacing:0.1em}
.footer-tagline{font-size:18px;font-weight:700;color:var(--copper);margin-bottom:8px}
.footer-phil{font-family:"EB Garamond",serif;font-style:italic;font-size:15px;color:var(--gray);line-height:1.6}
.footer-contacts{text-align:right}
.footer-link{display:block;font-size:14px;color:var(--copper);margin-bottom:10px;transition:opacity 0.2s}
.footer-link:hover{opacity:0.7}
.footer-site{font-size:12px;color:var(--gray)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.05);padding:20px 48px;max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:11px;color:rgba(255,255,255,0.2);letter-spacing:0.1em}
@media(max-width:768px){.footer-inner{flex-direction:column}.footer-contacts{text-align:left}.footer-bottom{padding:16px 20px;flex-direction:column;gap:8px;text-align:center}}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(11,16,30,0.92);backdrop-filter:blur(8px);z-index:850;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s ease;padding:20px}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-box{background:var(--navy-mid);border:1px solid rgba(193,127,62,0.2);max-width:760px;width:100%;padding:48px 40px;position:relative;transform:translateY(20px);transition:transform 0.35s ease}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-close{position:absolute;top:20px;right:24px;background:none;border:none;color:var(--gray);font-size:22px;cursor:pointer;line-height:1;transition:color 0.2s}
.modal-close:hover{color:var(--white)}
.modal-label{font-size:10px;font-weight:700;color:var(--copper);letter-spacing:0.3em;text-transform:uppercase;margin-bottom:14px}
.modal-title{font-size:clamp(20px,3vw,28px);font-weight:800;color:var(--white);line-height:1.2;margin-bottom:10px}
.modal-sub{font-size:14px;color:var(--gray);margin-bottom:36px;line-height:1.6}

/* ШАГ 1 — выбор */
.modal-step{display:none}
.modal-step.active{display:block}
.modal-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.modal-opt{background:var(--navy-deep);border:1px solid rgba(193,127,62,0.15);padding:24px 20px;cursor:pointer;transition:border-color 0.25s,background 0.25s,transform 0.2s;text-align:left}
.modal-opt:hover{border-color:var(--copper);background:rgba(193,127,62,0.06);transform:translateY(-2px)}
.opt-icon{font-size:22px;margin-bottom:12px;line-height:1}
.opt-title{font-size:13px;font-weight:700;color:var(--white);margin-bottom:8px}
.opt-desc{font-size:12px;color:var(--gray);line-height:1.5}
.opt-arrow{margin-top:14px;font-size:10px;font-weight:700;color:var(--copper);letter-spacing:0.15em;text-transform:uppercase}

/* ШАГ 2 — результат */
.modal-result-icon{font-size:32px;margin-bottom:16px;line-height:1}
.modal-result-title{font-size:clamp(18px,2.5vw,24px);font-weight:800;color:var(--white);margin-bottom:20px}
.modal-result-list{margin-bottom:28px}
.modal-result-list li{font-size:14px;color:rgba(255,255,255,0.75);padding:7px 0 7px 18px;border-bottom:1px solid rgba(255,255,255,0.06);position:relative;line-height:1.6}
.modal-result-list li::before{content:"—";position:absolute;left:0;color:var(--copper)}
.modal-result-list li:last-child{border-bottom:none}
.modal-tg-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 32px;background:var(--copper);color:var(--navy-deep);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;border:none;cursor:pointer;transition:background 0.2s,transform 0.2s;width:100%;justify-content:center;margin-bottom:16px}
.modal-tg-btn:hover{background:var(--copper-light);transform:translateY(-1px)}
.modal-back{background:none;border:none;color:var(--gray);font-size:12px;font-family:inherit;cursor:pointer;letter-spacing:0.1em;text-transform:uppercase;transition:color 0.2s;padding:4px 0}
.modal-back:hover{color:var(--white)}
@media(max-width:600px){.modal-options{grid-template-columns:1fr}.modal-box{padding:36px 24px}}

/* FAQ */
#faq{background:var(--cream)}
.faq-list{display:grid;gap:2px;margin-top:0}
.faq-item{background:var(--white);border-left:3px solid transparent;transition:border-color 0.25s}
.faq-item.open{border-left-color:var(--copper)}
.faq-q{width:100%;background:none;border:none;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;text-align:left;font-family:"Montserrat",sans-serif}
.faq-q-text{font-size:15px;font-weight:700;color:var(--navy);line-height:1.4}
.faq-icon{flex-shrink:0;width:28px;height:28px;border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--copper);transition:transform 0.3s,background 0.25s,border-color 0.25s;font-weight:300;line-height:1}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--copper);border-color:var(--copper);color:var(--white)}
.faq-body{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s ease}
.faq-item.open .faq-body{max-height:600px}
.faq-a{padding:0 28px 24px;font-size:14px;color:var(--text-body);line-height:1.75;border-top:1px solid var(--border)}
.faq-a p{padding-top:20px}

/* ANIMATIONS */
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes expandLine{from{width:0;opacity:0}to{width:80px;opacity:1}}