*{box-sizing:border-box}
:root{
  --ink:#182236;
  --text:#283248;
  --paper:#eef5fb;
  --white:#ffffff;
  --blue:#3778d7;
  --blue2:#79b9ff;
  --cyan:#4edee7;
  --lime:#b9e862;
  --pink:#ee7db0;
  --silver:#c8d3e0;
  --line:#a9bbcf;
  --navy:#1b3153;
  --shadow:rgba(36,72,115,.18);
  --max:1260px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 0%,rgba(78,222,231,.18),transparent 22rem),
    radial-gradient(circle at 88% 7%,rgba(238,125,176,.12),transparent 24rem),
    linear-gradient(#eaf3fb,#f7fbff 42%,#edf4fa);
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:1.55;
  overflow-x:hidden
}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:"Trebuchet MS",Verdana,Arial,sans-serif;line-height:1.02;color:var(--ink)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:999;background:#fff;padding:.8rem 1rem;border:2px solid var(--blue)}

.hero{padding:0 16px 48px}
.decades{
  width:min(100%,1420px);
  margin:0 auto 16px;
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
  gap:4px;padding:8px;
  border:1px solid #a4b5c7;border-top:0;
  border-radius:0 0 18px 18px;
  background:linear-gradient(#fdfefe,#cbd7e5);
  box-shadow:0 6px 18px var(--shadow)
}
.decades a,.decades span{
  min-height:34px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:.69rem;font-weight:900;
  color:#2b3a4f;border:1px solid transparent;border-radius:10px
}
.decades a:hover{background:rgba(255,255,255,.7);border-color:#9fbbd8}
.decades span{
  color:white;background:linear-gradient(#72bcff,#2a6dca);
  border-color:#2865b5;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)
}

.browser-shell{
  width:min(100%,var(--max));
  margin:auto;
  border:1px solid #8da7c2;border-radius:20px;
  background:rgba(255,255,255,.88);
  box-shadow:0 22px 60px rgba(50,94,145,.2),inset 0 1px 0 #fff;
  overflow:hidden
}
.browser-bar{
  min-height:48px;display:grid;grid-template-columns:120px 1fr 100px;gap:12px;align-items:center;
  padding:8px 14px;
  background:linear-gradient(#fbfdff,#cad7e4);
  border-bottom:1px solid #8fa8c1
}
.browser-dots{display:flex;gap:7px}
.browser-dots i{display:block;width:13px;height:13px;border-radius:50%;background:#d4dce4;border:1px solid #8798aa}
.browser-dots i:nth-child(1){background:#ff8ea7}.browser-dots i:nth-child(2){background:#ffd765}.browser-dots i:nth-child(3){background:#84dc88}
.address-pill{
  padding:7px 14px;border-radius:16px;background:white;border:1px solid #a8b9cb;
  color:#66768a;font-size:.7rem;font-weight:700;box-shadow:inset 0 2px 3px rgba(67,88,110,.09)
}
.browser-signal{text-align:right;color:#42924e;font-size:.66rem;font-weight:900}
.hero-grid{display:grid;grid-template-columns:.76fr 1.24fr;gap:30px;align-items:center;padding:44px}
.eyebrow,.section-label,.section-head>p,.section-window-title p,.player-head p,.screen>p,.legacy-copy>p:first-child{
  margin:0 0 10px;font-size:.7rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)
}
.hero-year{display:flex;align-items:flex-end;gap:8px;line-height:.74;margin:0 0 20px}
.hero-year span{font-weight:900;letter-spacing:.2em;color:#8392a7}
.hero-year strong{
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:clamp(5rem,11vw,9.5rem);
  letter-spacing:-.09em;
  background:linear-gradient(180deg,#ffffff 0%,#cdeaff 20%,#58a4ee 55%,#245cac 56%,#7ac6ff 83%,#d7f2ff 100%);
  -webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #1d4d88) drop-shadow(0 6px 7px rgba(40,85,135,.25))
}
.hero h1{font-size:clamp(2rem,4vw,4rem);margin:0 0 18px;letter-spacing:-.035em}
.hero-lede{font-size:1.03rem;max-width:570px;color:#536177}
.hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.hero-chips span{
  padding:7px 10px;border-radius:12px;background:linear-gradient(#fff,#dceaf6);
  border:1px solid #a9c1d8;font-size:.65rem;font-weight:900;color:#3c5877;
  box-shadow:inset 0 1px 0 #fff
}
.hero-photo{
  margin:0;padding:9px;border-radius:17px;
  background:linear-gradient(135deg,#dff7ff,#f9fdff 40%,#c9d8e9);
  border:1px solid #91abc5;box-shadow:0 10px 24px var(--shadow)
}
.hero-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:11px}
.hero-photo figcaption,.tech-photo figcaption,.fashion-photo figcaption{padding:10px 5px 2px;font-size:.8rem;color:#56667b}

.quick-nav{
  width:min(100% - 32px,var(--max));margin:22px auto 0;
  display:flex;gap:7px;flex-wrap:wrap;align-items:center
}
.quick-nav span,.quick-nav a{
  min-height:34px;display:inline-flex;align-items:center;padding:7px 11px;
  border-radius:11px;border:1px solid #9bb1c8;background:linear-gradient(#fff,#d9e5f0);
  text-decoration:none;font-size:.72rem;font-weight:800;box-shadow:inset 0 1px 0 #fff
}
.quick-nav span{background:linear-gradient(#6eb7ff,#316fc5);color:white;border-color:#2b62ac}
.quick-nav a:hover{background:linear-gradient(#efffff,#bceaf0)}

main section{width:min(100% - 32px,var(--max));margin:auto}
.overview{padding:70px 0 20px}
.section-window-title{
  display:flex;gap:18px;align-items:center;padding:16px 20px;
  border:1px solid #91a8c0;border-radius:15px 15px 0 0;
  background:linear-gradient(#fdfefe,#ccd9e6);box-shadow:inset 0 1px 0 #fff
}
.section-window-title>span{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:linear-gradient(#78cbff,#3377d1);color:#fff;font-weight:900
}
.section-window-title h2{margin:0;font-size:clamp(1.9rem,4vw,3.4rem)}
.overview-grid{
  display:grid;grid-template-columns:1.3fr .7fr;gap:26px;
  padding:26px;border:1px solid #a2b5c9;border-top:0;background:rgba(255,255,255,.72);
  border-radius:0 0 15px 15px
}
.overview-copy{columns:2 260px;column-gap:28px}
.overview-copy p{font-family:Georgia,serif;margin:0 0 14px;break-inside:avoid;font-size:1rem}
.status-panel{display:grid;gap:10px;align-self:start}
.status-panel div{padding:18px;border-radius:16px;background:linear-gradient(135deg,#effbff,#e2ecf8);border:1px solid #a3b9cf}
.status-panel strong{display:block;color:#2c68b6;font-size:.8rem;margin-bottom:5px}
.status-panel span{font-size:.86rem;color:#647286}

.events{padding:76px 0 20px}
.section-head{display:grid;grid-template-columns:.27fr 1fr;gap:22px;align-items:end;margin-bottom:22px;border-bottom:4px solid #8ccaf4;padding-bottom:16px}
.section-head h2{font-size:clamp(2rem,4vw,3.8rem);margin:0}
.feed,.america-list,.movie-grid,.music-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.feed-row,.city-row,.movie-row,.track-row{
  display:grid;grid-template-columns:48px 1fr;gap:12px;padding:15px;
  background:rgba(255,255,255,.78);border:1px solid #afc1d2;border-radius:13px;
  box-shadow:0 5px 12px rgba(75,108,143,.07)
}
.num{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:linear-gradient(#fdfefe,#cbdceb);border:1px solid #9bb2c7;
  color:#3d6ca4;font-size:.75rem;font-weight:900
}
.feed-row h3,.city-row h3,.movie-row h3,.track-row h3{margin:0 0 5px;font-size:.95rem}
.feed-row p,.city-row p,.movie-row p,.track-row p{margin:0;font-size:.86rem;color:#59687d}

.technology{
  width:100%;max-width:none;margin-top:74px;padding:66px max(16px,calc((100vw - var(--max))/2));
  background:linear-gradient(135deg,#dcecff,#f9fdff 52%,#ddf7f5);
  display:grid;grid-template-columns:.7fr 1.3fr;gap:28px
}
.tech-copy{align-self:center}
.tech-copy h2,.fashion-copy h2,.legacy-copy h2{font-size:clamp(2.2rem,4.5vw,4.2rem);margin:0 0 16px}
.tech-copy p:last-child,.fashion-copy p:last-child,.legacy-copy p{font-family:Georgia,serif}
.tech-photo{margin:0;padding:8px;border-radius:20px;background:#fff;border:1px solid #92abc3;box-shadow:0 16px 34px var(--shadow)}
.tech-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:13px}
.app-grid,.culture-grid,.fashion-grid,.cars-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:12px}
.app-card,.culture-card,.fashion-card,.car-card{
  min-height:186px;padding:14px;border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(230,239,248,.95));
  border:1px solid #a4b8cc;box-shadow:0 8px 18px rgba(67,100,137,.09),inset 0 1px 0 #fff
}
.app-top{display:flex;align-items:center;justify-content:space-between}
.app-top span{font-size:.7rem;font-weight:900;color:#5c7593}
.app-top i{width:13px;height:13px;border-radius:50%;background:var(--blue2);box-shadow:inset 0 2px 3px rgba(255,255,255,.8)}
.app-card h3,.culture-card h3,.fashion-card h3,.car-card h3{font-size:.94rem;margin:22px 0 6px}
.app-card p,.culture-card p,.fashion-card p,.car-card p{margin:0;font-size:.84rem;color:#5a687b}
.card-1 .app-top i{background:var(--pink)}.card-2 .app-top i{background:var(--cyan)}.card-3 .app-top i{background:var(--lime)}.card-4 .app-top i{background:#9b8ce2}.card-5 .app-top i{background:#ffbd66}

.culture{padding:78px 0 20px}
.split-head{grid-template-columns:.22fr 1fr .8fr}
.split-head>span{font-family:Georgia,serif;color:#66758a}
.culture-card:nth-child(3n+1){background:linear-gradient(145deg,#fff,#fff0f7)}
.culture-card:nth-child(3n+2){background:linear-gradient(145deg,#fff,#ebffff)}
.culture-card:nth-child(3n){background:linear-gradient(145deg,#fff,#f4ffe1)}

.america{padding:80px 0 20px}
.dark-title{background:linear-gradient(#2f5284,#1a3154);color:#fff;border-color:#132a49}
.dark-title h2,.dark-title p{color:#fff}
.dark-title>span{background:linear-gradient(#b9ecff,#4aa7df);color:#17385b}
.america-list{margin-top:12px}

.fashion{
  margin-top:80px!important;padding:44px!important;
  display:grid;grid-template-columns:1.18fr .82fr;gap:28px;
  border:1px solid #9db2c8;border-radius:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(247,226,242,.9));
  box-shadow:0 20px 40px rgba(72,96,127,.12)
}
.fashion-photo{margin:0;padding:8px;border-radius:19px;background:#fff;border:1px solid #aab8c8}
.fashion-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.fashion-copy{align-self:center}
.fashion-grid{grid-column:1/-1}
.fashion-card:nth-child(odd){border-top:4px solid var(--pink)}
.fashion-card:nth-child(even){border-top:4px solid var(--cyan)}

.movies{padding:80px 0 20px}
.player-head{
  display:flex;align-items:center;gap:18px;padding:18px 20px;margin-bottom:12px;
  background:linear-gradient(#2e4d78,#182d4e);color:#fff;border-radius:18px 18px 6px 6px
}
.player-head h2{color:#fff;font-size:clamp(2rem,4vw,3.7rem);margin:0}
.player-head p{color:#9cdcff}
.player-icon{
  width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(#d9f8ff,#65c7f2);color:#214f78;font-size:1.4rem;box-shadow:inset 0 2px 0 #fff
}

.music{
  width:100%;max-width:none;margin-top:78px;padding:70px max(16px,calc((100vw - var(--max))/2));
  background:linear-gradient(180deg,#d9e6f1,#f4f8fb)
}
.music-player{
  display:grid;grid-template-columns:1fr 160px;gap:0;max-width:900px;margin:0 auto 28px;
  border-radius:30px;background:linear-gradient(#fbfdff,#c2cfdb);border:1px solid #96a8b8;
  box-shadow:0 16px 30px rgba(56,75,96,.17);overflow:hidden
}
.screen{margin:14px;padding:20px;border-radius:16px;background:linear-gradient(#bdde8f,#d8f2b2);border:1px solid #799d53}
.screen p{color:#4f6d36}.screen h2{margin:0 0 8px;font-size:clamp(1.7rem,3vw,2.8rem)}
.screen span{font-size:.66rem;font-weight:900;letter-spacing:.1em;color:#587444}
.controls{display:flex;align-items:center;justify-content:center;gap:10px;border-left:1px solid #a0afbd}
.controls b{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(#fff,#c7d2dc);border:1px solid #899aaa;color:#536273}

.cars{padding:80px 0 30px}
.car-card:nth-child(4n+1){box-shadow:inset 0 4px 0 #6fb5ff}
.car-card:nth-child(4n+2){box-shadow:inset 0 4px 0 #9ddf79}
.car-card:nth-child(4n+3){box-shadow:inset 0 4px 0 #f39ac2}
.car-card:nth-child(4n){box-shadow:inset 0 4px 0 #f0c76c}

.legacy{
  width:100%;max-width:none;margin-top:78px;padding:74px max(16px,calc((100vw - var(--max))/2));
  display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:center;
  color:#fff;background:
    radial-gradient(circle at 12% 30%,rgba(78,222,231,.22),transparent 220px),
    linear-gradient(135deg,#244c85,#182945)
}
.legacy-orb{
  width:190px;height:190px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-family:"Trebuchet MS",sans-serif;font-size:4.8rem;font-weight:900;color:#fff;
  background:radial-gradient(circle at 35% 25%,#f6fdff,#69bef3 28%,#286dbb 64%,#183e7a 100%);
  box-shadow:inset -15px -18px 28px rgba(0,0,0,.17),0 14px 30px rgba(0,0,0,.22)
}
.legacy-copy p:first-child{color:#8eeaf0}
.legacy-copy h2{color:#fff}
.legacy-copy p{color:#d9e6f5}

.faq{padding:76px 0}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.faq-grid details{
  border:1px solid #a1b5ca;border-radius:13px;background:rgba(255,255,255,.8);padding:0 16px;
  box-shadow:inset 0 1px 0 #fff
}
.faq-grid summary{cursor:pointer;padding:15px 0;font-weight:900;color:#294e78}
.faq-grid p{margin:0 0 16px;font-family:Georgia,serif}

.footer{
  text-align:center;padding:42px 20px;color:#d8e4f1;
  background:linear-gradient(#223f66,#14263e)
}
.footer-logo{font-family:"Trebuchet MS",sans-serif;font-size:4rem;font-weight:900;color:#7bdbe9}
.footer p{max-width:820px;margin:0 auto 12px}
.footer a{color:#b8ecf0;text-decoration:none;font-weight:900}

@media(max-width:1080px){
  .app-grid,.culture-grid,.fashion-grid,.cars-grid{grid-template-columns:repeat(3,1fr)}
  .overview-grid{grid-template-columns:1fr}
}
@media(max-width:880px){
  .decades{grid-template-columns:repeat(5,1fr)}
  .browser-bar{grid-template-columns:90px 1fr}.browser-signal{display:none}
  .hero-grid,.technology,.fashion{grid-template-columns:1fr}
  .feed,.america-list,.movie-grid,.music-grid{grid-template-columns:1fr}
  .split-head{grid-template-columns:1fr}
  .app-grid,.culture-grid,.fashion-grid,.cars-grid{grid-template-columns:repeat(2,1fr)}
  .music-player{grid-template-columns:1fr}.controls{border-left:0;border-top:1px solid #a0afbd;padding:12px}
  .legacy{grid-template-columns:1fr}.legacy-orb{width:150px;height:150px;font-size:3.8rem}
}
@media(max-width:580px){
  .hero-grid{padding:26px 18px}
  .hero-year strong{font-size:5.2rem}
  .browser-bar{grid-template-columns:70px 1fr}.address-pill{font-size:.58rem}
  .overview-copy{columns:1}
  .app-grid,.culture-grid,.fashion-grid,.cars-grid,.faq-grid{grid-template-columns:1fr}
  .fashion{padding:26px 16px!important}
  .section-head{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}