/* 10 · Always on the latest — one phone travels through every technology era */
.tt{position:relative;overflow:hidden;background:radial-gradient(800px 640px at 50% 58%,#1d2270 0%,rgba(29,34,112,0) 62%),#0a0c28}
.tt>.wrap{position:relative}
.tt .tt-accent{color:#8f96ff}
.tt .section-heading{margin-bottom:40px}
.tt-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);gap:56px;align-items:center}

/* left copy */
.tt-copy{display:flex;flex-direction:column;align-items:flex-start}
.tt-year{font-size:clamp(64px,7vw,110px);line-height:.9;font-weight:300;letter-spacing:-.06em;color:#fff;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,#8f96ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tt-bar{position:relative;width:100%;max-width:300px;height:2px;margin:22px 0 18px;background:rgba(143,150,255,.18);border-radius:2px;overflow:hidden}
.tt-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#4f56ff,#a3a8ff);box-shadow:0 0 10px #6f76ff}
.tt-era{font:600 11px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;color:#8f96ff;margin-bottom:14px}
.tt-head{font-size:clamp(24px,2.3vw,32px);font-weight:400;letter-spacing:-.03em;line-height:1.15;color:#fff;margin:0 0 12px;max-width:380px}
.tt-desc{font-size:14px;line-height:1.75;color:#b9c2e3;margin:0;max-width:380px;min-height:74px}
.tt-since{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:12px;color:#a9b0dc}
.tt-since i{width:7px;height:7px;border-radius:50%;background:#6f76ff;animation:tt-live 2.4s ease-out infinite}
@keyframes tt-live{0%{box-shadow:0 0 0 0 rgba(111,118,255,.6)}100%{box-shadow:0 0 0 9px rgba(111,118,255,0)}}

/* phone */
.tt-stage{position:relative;height:640px;display:grid;place-items:center;perspective:1400px}
.tt-halo{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(111,118,255,.45),rgba(111,118,255,0) 65%);filter:blur(10px);animation:tt-halo 6s ease-in-out infinite}
@keyframes tt-halo{50%{transform:scale(1.08);opacity:.8}}
.tt-phone{position:relative;width:300px;height:616px;border-radius:50px;padding:11px;
  background:linear-gradient(145deg,#3a3e78,#1a1d4a 40%,#0f1133 60%,#2b2f6e);
  box-shadow:0 0 0 1.5px rgba(190,196,255,.35),inset 0 0 0 1px rgba(255,255,255,.12),0 60px 120px -30px rgba(0,0,0,.85),0 0 80px -20px rgba(111,118,255,.6);
  transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transform-style:preserve-3d;will-change:transform}
.tt-phone::before,.tt-phone::after{content:"";position:absolute;right:-3px;width:3px;border-radius:0 2px 2px 0;background:#2b2f6e}
.tt-phone::before{top:150px;height:70px}.tt-phone::after{top:110px;height:30px;left:-3px;right:auto;border-radius:2px 0 0 2px}
.tt-screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#000;isolation:isolate}
.tt-status{position:absolute;z-index:5;left:0;right:0;top:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font:600 13px/1 Poppins,Arial,sans-serif;color:var(--sb,#111);transition:color .8s}
.tt-island{position:absolute;left:50%;top:11px;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#000}
.tt-sig{display:flex;gap:2px;align-items:flex-end}.tt-sig i{width:3px;border-radius:1px;background:currentColor}.tt-sig i:nth-child(1){height:5px}.tt-sig i:nth-child(2){height:8px}.tt-sig i:nth-child(3){height:11px}
.tt-scr{position:absolute;inset:0;padding:58px 18px 22px;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden}
.tt-scr.on{opacity:1;visibility:visible}
.tt-wipe{position:absolute;z-index:6;left:-10%;right:-10%;top:0;height:90px;margin-top:-90px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(143,150,255,0),rgba(170,176,255,.55) 80%,#fff 100%);box-shadow:0 2px 24px 4px rgba(143,150,255,.8)}

/* 2006 web */
.s0{background:#fff;font:11px/1.35 Verdana,Tahoma,sans-serif;color:#000;gap:9px}
.w-nav{background:#003399;color:#fff;padding:6px;font-size:10px}.w-nav u{color:#ffff66}
.w-hd{font:bold 18px 'Times New Roman',serif;color:#cc0000;text-align:center}
.w-mq{background:#ffff99;border:1px dashed #cc9900;text-align:center;font-size:10px;padding:3px;color:#990000}
.w-tb{border-collapse:collapse;width:100%;font-size:10px}.w-tb th{background:#cccccc;border:1px solid #888}.w-tb td{border:1px solid #aaa;padding:3px 5px}
.w-form{display:flex;flex-direction:column;gap:4px;font-size:10px;border:2px groove #ddd;padding:8px}
.w-form span{height:16px;border:1px inset #999;background:#fff}
.w-form button{align-self:flex-start;font:10px Verdana,sans-serif;border:2px outset #ddd;background:#ddd;padding:2px 10px}
.w-ft{margin-top:auto;text-align:center;font-size:9px;color:#666}

/* 2010 mobile */
.s1{background:linear-gradient(#5d6f8f,#2c3a55);--sb:#fff;color:#fff;font-family:Helvetica,Arial,sans-serif}
.m-bar{margin:-58px -18px 0;padding:56px 0 12px;text-align:center;font-weight:bold;font-size:16px;background:linear-gradient(#8fa2c5,#5a6e93);border-bottom:1px solid #2b3956;text-shadow:0 -1px 0 rgba(0,0,0,.4)}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:10px 6px}
.m-grid i{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;font-style:normal;font-size:26px;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 50%),var(--h);box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.m-card{background:linear-gradient(#fff,#e9ecf2);color:#222;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:3px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.m-card b{font-size:14px}.m-card span{font-size:11px;color:#667}
.m-btn{margin-top:auto;text-align:center;padding:12px;border-radius:12px;font-weight:bold;background:linear-gradient(#6fd36b,#2f9e2b);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 5px rgba(0,0,0,.4)}

/* 2014 cloud */
.s2{background:#f4f7fb;font-family:'Helvetica Neue',Arial,sans-serif;color:#1d2433}
.c-top{display:flex;justify-content:space-between;align-items:center}.c-top b{font-size:20px;font-weight:300}
.c-sync{font-size:11px;color:#1e9e63;display:flex;align-items:center;gap:5px}.c-sync::before{content:"";width:7px;height:7px;border-radius:50%;background:#1e9e63}
.c-file{display:flex;align-items:center;gap:12px;background:#fff;border-radius:10px;padding:11px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.c-file>i{width:30px;height:36px;border-radius:4px;background:linear-gradient(135deg,#4aa3ff,#2d6fe0);flex:none}
.c-file:nth-of-type(3)>i{background:linear-gradient(135deg,#46c37b,#1e9e63)}.c-file:nth-of-type(4)>i{background:linear-gradient(135deg,#ffb84a,#f08a24)}
.c-file div{flex:1;display:flex;flex-direction:column;gap:2px}.c-file b{font-size:12px;font-weight:500}.c-file span{font-size:10px;color:#7a8499}
.c-file em{width:16px;height:16px;border-radius:50%;border:2px solid #cfe3ff;border-top-color:#2d6fe0;animation:tt-spin 1.2s linear infinite}
@keyframes tt-spin{to{transform:rotate(360deg)}}
.c-team{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#7a8499}
.c-team div{display:flex}.c-team i{width:28px;height:28px;margin-left:-6px;border-radius:50%;border:2px solid #f4f7fb;display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:600;color:#fff;background:#6b7bd8}
.c-team i:nth-child(2){background:#e0716b}.c-team i:nth-child(3){background:#46b38a}.c-team i:nth-child(4){background:#9aa3b8}

/* 2018 data */
.s3{background:#0f1430;--sb:#fff;color:#fff;font-family:Poppins,Arial,sans-serif}
.d-top small{font-size:11px;color:#8b93c7}.d-top b{display:block;font-size:26px;font-weight:500;letter-spacing:-.02em}.d-top em{font-style:normal;font-size:12px;color:#4fe0a0}
.d-chart{height:150px;display:flex;align-items:flex-end;gap:8px;padding:10px;border-radius:14px;background:rgba(255,255,255,.04)}
.d-chart i{flex:1;height:calc(var(--v) * 100%);border-radius:5px 5px 2px 2px;background:linear-gradient(#7d84ff,#3d43c9);transform-origin:bottom;transform:scaleY(.08)}
.tt-scr.s3.on .d-chart i{animation:tt-grow 1s cubic-bezier(.2,.8,.2,1) forwards}
.d-chart i:nth-child(2){animation-delay:.08s!important}.d-chart i:nth-child(3){animation-delay:.16s!important}.d-chart i:nth-child(4){animation-delay:.24s!important}.d-chart i:nth-child(5){animation-delay:.32s!important}.d-chart i:nth-child(6){animation-delay:.4s!important}.d-chart i:nth-child(7){animation-delay:.48s!important}
@keyframes tt-grow{to{transform:scaleY(1)}}
.d-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}.d-kpis div{border-radius:12px;padding:12px;background:rgba(255,255,255,.06)}
.d-kpis b{display:block;font-size:22px;font-weight:500}.d-kpis span{font-size:10px;color:#8b93c7}
.d-ins{margin-top:auto;border-radius:12px;padding:12px;background:linear-gradient(135deg,rgba(79,224,160,.15),rgba(79,224,160,.04));border:1px solid rgba(79,224,160,.3);font-size:11px;line-height:1.5}
.d-ins b{display:block;color:#4fe0a0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}

/* 2023 AI */
.s4{background:linear-gradient(170deg,#f7f8ff,#e9ebff);font-family:Poppins,Arial,sans-serif;color:#141743}
.a-top,.g-top{display:flex;align-items:center;gap:10px}.a-top b,.g-top b{font-size:15px;font-weight:500}
.a-ai{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(135deg,#2a2d9f,#6a70ff)}
.a-msg{max-width:86%;border-radius:16px;padding:10px 13px;font-size:12px;line-height:1.55}
.a-msg.me{align-self:flex-end;background:#2a2d9f;color:#fff;border-bottom-right-radius:5px}
.a-msg.ai{background:#fff;border:1px solid #e0e3fb;border-bottom-left-radius:5px;min-height:76px}
.a-chips{display:flex;gap:6px;flex-wrap:wrap}.a-chips span{font-size:10.5px;border-radius:999px;padding:6px 10px;border:1px solid #cdd1f6;color:#2a2d9f;background:#fff}
.a-chips span:first-child{background:#2a2d9f;color:#fff;border-color:#2a2d9f}
.a-ask{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#8a8db3;background:#fff;border:1px solid #dde0f7;border-radius:999px;padding:11px 14px}
.a-ask i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#2a2d9f,#6a70ff)}

/* NEXT agents */
.s5{background:linear-gradient(170deg,#12164a,#090b26);--sb:#fff;color:#fff;font-family:Poppins,Arial,sans-serif}
.g-goal{font-size:13px;line-height:1.5;color:#c9ccff;border-left:2px solid #6f76ff;padding-left:10px;margin-bottom:4px}
.g-task{display:flex;align-items:center;gap:10px;font-size:12px;color:#8b93c7;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(143,150,255,.12);transition:color .5s,background .5s,border-color .5s}
.g-task i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #4a4f9a;display:grid;place-items:center;transition:background .4s,border-color .4s}
.g-task.done{color:#fff;background:rgba(111,118,255,.12);border-color:rgba(143,150,255,.35)}
.g-task.done i{background:#6f76ff;border-color:#6f76ff}.g-task.done i::after{content:"✓";font-size:11px;font-style:normal;color:#fff}
.g-ok{margin-top:auto;text-align:center;font-size:12px;font-weight:500;padding:12px;border-radius:999px;background:linear-gradient(135deg,#4f56ff,#8f96ff);opacity:.35;transition:opacity .6s}
.g-ok.go{opacity:1;box-shadow:0 8px 30px -8px #6f76ff}

/* right: tech chips */
.tt-tech{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tt-tech li{display:flex;align-items:center;gap:12px;font-size:15px;color:#fff;padding:12px 18px 12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(160,168,255,.2)}
.tt-tech li i{width:9px;height:9px;border-radius:50%;background:#6f76ff;box-shadow:0 0 10px #6f76ff}
.tt-tech li.tt-tech-h{padding:0;border:0;background:none;font:600 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.18em;color:#8f96ff;margin-bottom:4px;text-transform:uppercase}

/* timeline */
.tt-line{position:relative;display:grid;grid-template-columns:repeat(6,1fr);margin-top:48px;padding-top:30px}
.tt-track{position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:0;height:2px;background:rgba(143,150,255,.18);border-radius:2px}
.tt-track b{position:absolute;left:0;top:0;bottom:0;width:var(--f,0%);background:linear-gradient(90deg,#3d43c9,#8f96ff);box-shadow:0 0 12px #6f76ff;transition:width 1.1s cubic-bezier(.65,0,.25,1)}
.tt-dot{position:absolute;top:50%;left:var(--f,0%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(143,150,255,.3),0 0 22px #8f96ff;transition:left 1.1s cubic-bezier(.65,0,.25,1)}
.tt-node{position:relative;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:#7d83bd;font-family:inherit;transition:color .4s}
.tt-node::before{content:"";position:absolute;top:-35px;width:10px;height:10px;border-radius:50%;background:#2a2e72;border:2px solid #4a4f9a;transition:background .4s,border-color .4s}
.tt-node b{font:500 13px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.06em}
.tt-node span{font-size:12px}
.tt-node.past{color:#b9c2e3}.tt-node.past::before{background:#6f76ff;border-color:#6f76ff}
.tt-node.on{color:#fff}
.tt-node.next b{color:#a3a8ff}
.tt-node.next::before{border-style:dashed;animation:tt-next 2s ease-in-out infinite}
@keyframes tt-next{50%{box-shadow:0 0 0 6px rgba(143,150,255,.2)}}
.tt-node:focus-visible{outline:2px solid #8f96ff;outline-offset:6px;border-radius:6px}

@media(max-width:1100px){.tt-layout{grid-template-columns:1fr 320px;gap:36px}.tt-tech{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}}
@media(max-width:760px){.tt-layout{grid-template-columns:1fr}.tt-stage{height:560px}.tt-phone{transform:scale(.88)}.tt-node span{display:none}.tt-year{font-size:64px}}
@media(prefers-reduced-motion:reduce){.tt-halo,.tt-since i,.c-file em,.tt-node.next::before{animation:none}}

/* fast flicker spin between eras */
.tt-spin .tt-track b,.tt-spin .tt-dot{transition-duration:.07s!important}
.tt-phone.tt-flick .tt-screen{animation:tt-flick .14s steps(2)}
@keyframes tt-flick{0%{filter:brightness(1.8) blur(1.5px);transform:translateY(-3px)}100%{filter:none;transform:none}}
.tt-phone.tt-land{animation:tt-land .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes tt-land{0%{scale:1}35%{scale:1.04}100%{scale:1}}
.tt-spin .tt-year{filter:blur(.6px)}
.tt-phone.tt-flick .tt-screen{animation:none}.tt-spin .tt-year{filter:none}